ldc-ovoteam/resources/ts/back/Pages/Users/Form.tsx

import { useForm, usePage } from "@inertiajs/react";
import { BookTextIcon, EyeIcon } from "lucide-react";

import FieldsetWrapper from "@/back/Components/FieldsetWrapper";
import InputError from "@/back/Components/InputError";
import EnumSelect from "@/back/Components/Inputs/EnumSelect";
import SimpleString from "@/back/Components/Inputs/SimpleString";
import SimpleSwitch from "@/back/Components/Inputs/SimpleSwitch";
import SubmitButton from "@/back/Components/SubmitButton";
import useCrudSubmit from "@/back/hooks/use-crud-submit";
import type { AuthProp, UserModel } from "@/back/types/global";
import str from "@/hooks/use-string";
import trans from "@/hooks/use-translations";

export default function Form({
  model,
  modelName,
  modelRoute,
  action,
  method,
}: {
  model?: UserModel;
  modelName: string;
  modelRoute: string;
  action: string;
  method: number;
}) {
  const userModel = (usePage().props.auth as AuthProp).user;
  const enumUserRole = usePage().props.enumUserRole as UserModel["role"][];
  const getEnumRoleValue = (name: string) =>
    enumUserRole.find((role) => role.name === name)?.value;

  const filterRoles = (value: number) => {
    return Object.entries(enumUserRole)

      .filter(([_, role]) => role.value >= value)
      .reduce((acc, [key, val]) => ({ ...acc, [key]: val }), {});
  };

  // Form section.
  const { post, setData, data } = useForm({
    first_name: model?.first_name,
    last_name: model?.last_name,
    email: model?.email,
    role: model?.role ? model.role.value : undefined,
    published: model?.published ?? false,
    published_at: model?.published_at,
  });

  const submit = useCrudSubmit({
    method,
    modelRoute,
    action,
    model,
    post,
    data,
    modelNameTrans: trans(`uwil-backend::models.classes.${modelName}`, {
      choice: 1,
    }),
  });

  // * Translations.
  const transAssociateToRole = str(
    trans("uwil-backend::back.form_associate_to", {
      params: {
        attribute: trans("uwil-backend::validation.attributes.role"),
      },
      choice: 1,
    }),
  )
    .ucFirst()
    .value();
  const transFormTitleVisibility = trans(
    "uwil-backend::back.form_title_visibility",
  );
  const transFormSubtitleVisibility = trans(
    "uwil-backend::back.form_subtitle_visibility",
  );

  return (
    <form onSubmit={submit} className="grid grid-cols-2 gap-4">
      <InputError all />
      <FieldsetWrapper
        title={trans("uwil-backend::back.form_title_global")}
        icon={<BookTextIcon className="mr-1" />}
        description={trans("uwil-backend::back.form_subtitle_global")}
        className="sm:grid-cols-2 gap-4"
      >
        <SimpleString
          name="first_name"
          label={str(
            trans("uwil-backend::back.form_associate_to", {
              params: {
                attribute: trans(
                  "uwil-backend::validation.attributes.first_name",
                ),
              },
              choice: 1,
            }),
          )
            .ucFirst()
            .value()}
          placeholder="ex: John Doe"
          value={data.first_name}
          setData={setData}
        />
        <SimpleString
          name="last_name"
          label={str(
            trans("uwil-backend::back.form_associate_to", {
              params: {
                attribute: trans(
                  "uwil-backend::validation.attributes.last_name",
                ),
              },
              choice: 1,
            }),
          )
            .ucFirst()
            .value()}
          placeholder="ex: John Doe"
          value={data.last_name}
          setData={setData}
        />
        <SimpleString
          name="email"
          type="email"
          label={str(
            trans("uwil-backend::back.form_associate_to", {
              params: {
                attribute: trans("uwil-backend::validation.attributes.email"),
              },
              choice: 1,
            }),
          )
            .ucFirst()
            .value()}
          placeholder="ex: john.doe@gmail.com"
          disabled={!(userModel.role.value === getEnumRoleValue("conceptor"))}
          wordCounter={userModel.role.value === getEnumRoleValue("conceptor")}
          value={
            userModel.role.value === getEnumRoleValue("conceptor")
              ? model?.email
              : data.email
          }
          setData={setData}
        />
        {userModel.role.value === getEnumRoleValue("conceptor") && (
          <EnumSelect
            name="role"
            options={
              model?.role &&
              userModel.role.value !== getEnumRoleValue("conceptor")
                ? filterRoles(model.role.value)
                : enumUserRole
            }
            label={transAssociateToRole}
            selected={data.role ?? undefined}
            setData={setData}
          />
        )}
      </FieldsetWrapper>
      {userModel.role.value === getEnumRoleValue("conceptor") &&
        userModel.email !== model?.email && (
          <FieldsetWrapper
            title={transFormTitleVisibility}
            icon={<EyeIcon className="mr-1" />}
            description={transFormSubtitleVisibility}
            className="gap-4"
            inline
          >
            <SimpleSwitch
              name="published"
              checked={data.published}
              setData={setData}
            />
          </FieldsetWrapper>
        )}
      <div className="col-span-2 text-center">
        <SubmitButton
          modelTrans={trans(`uwil-backend::models.classes.${modelName}`, {
            choice: 1,
          })}
        />
      </div>
    </form>
  );
}