"use client";
import InputGroup from "@/components/FormElements/InputGroup";
import { TextAreaGroup } from "@/components/FormElements/InputGroup/text-area";
import { ShowcaseSection } from "@/components/Layouts/showcase-section";
import FormFooter from "@/components/ui/FormFooter";
import { FormErrorMessages } from "@/constants/Texts";
import { TCreateCompanyCategoryCredentials } from "@/lib/api";
import useCreateCompanyCategoryPresenter from "./useCreateCompanyCategoryPresenter";

interface IProps {
  editMode?: boolean;
  defaultValues?: TCreateCompanyCategoryCredentials;
  id?: string;
}

const CreateCompanyCategoryForm = ({ defaultValues, editMode, id }: IProps) => {
  const { errors, handleSubmit, onSubmit, register } =
    useCreateCompanyCategoryPresenter({ defaultValues, editMode, id });
  return (
    <form className="grid grid-cols-1 gap-9" onSubmit={handleSubmit(onSubmit)}>
      <ShowcaseSection
        title="Create Company Category"
        className="grid grid-cols-2 gap-5"
      >
        <div className="flex flex-col gap-2">
          <InputGroup
            label="Name"
            {...register("name", {
              required: {
                value: true,
                message: FormErrorMessages.required,
              },
              minLength: {
                value: 2,
                message: FormErrorMessages.minLength(2),
              },
              maxLength: {
                value: 100,
                message: FormErrorMessages.maxLength(100),
              },
            })}
            type="text"
            name="name"
            placeholder="Enter Category Name"
          />
          {errors.name && (
            <p className="mt-1 text-sm text-red-500">{errors.name.message}</p>
          )}
        </div>
        <div className="flex flex-col gap-2">
          <TextAreaGroup
            label="Description"
            {...register("description", {
              minLength: {
                value: 10,
                message: FormErrorMessages.minLength(10),
              },
              maxLength: {
                value: 1000,
                message: FormErrorMessages.maxLength(1000),
              },
            })}
            name="description"
            placeholder="Enter Description"
          />
          {errors.description && (
            <p className="mt-1 text-sm text-red-500">
              {errors.description.message}
            </p>
          )}
        </div>
        <FormFooter />
      </ShowcaseSection>
    </form>
  );
};

export default CreateCompanyCategoryForm;
