import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
import type { DynamicFormSection } from "@/components/forms/DynamicFormBuilder";
import { FormErrorMessages } from "@/constants/Texts";
import type { TCreateCompanyCategoryCredentials } from "@/lib/api";
import { v4 as uuidv4 } from "uuid";

const companyCategorySectionId = uuidv4();

export const createCompanyCategoryFormSections = (
  editMode?: boolean,
): DynamicFormSection<TCreateCompanyCategoryCredentials>[] => [
  {
    id: companyCategorySectionId,
    title: editMode ? "Edit Company Category" : "Create Company Category",
    className: "gap-5",
    fields: [
      {
        kind: "input",
        name: "name",
        label: "Name",
        type: "text",
        placeholder: "e.g. Technology",
        required: true,
        dataCy: "company-category-form-name-input",
        className: "md:col-span-1",
        rules: {
          required: {
            value: true,
            message: FormErrorMessages.required,
          },
          minLength: {
            value: 2,
            message: FormErrorMessages.minLength(2),
          },
          maxLength: {
            value: 100,
            message: FormErrorMessages.maxLength(100),
          },
        },
      },
      {
        kind: "custom",
        name: "description",
        className: "md:col-span-1",
        render: ({ register, errors }) => (
          <TextAreaGroup<TCreateCompanyCategoryCredentials>
            label="Description"
            dataCy="company-category-form-description-input"
            {...register("description", {
              minLength: {
                value: 10,
                message: FormErrorMessages.minLength(10),
              },
              maxLength: {
                value: 1000,
                message: FormErrorMessages.maxLength(1000),
              },
            })}
            name="description"
            errors={errors}
          />
        ),
      },
    ],
  },
];
