"use client";

import DynamicFormBuilder from "@/components/forms/DynamicFormBuilder";
import FormFooter from "@/components/ui/FormFooter";
import type { ICreateCompanyCredentials } from "@/lib/api";
import { createCompanyFormSections } from "./companyFormSections";
import useCreateCompanyPresenter from "./useCreateCompanyPresenter";

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

const CreateCompany = ({ defaultValues, editMode, id }: IProps) => {
  const {
    errors,
    handleSubmit,
    onSubmit,
    register,
    control,
    watch,
    setValue,
    companyCategories,
  } = useCreateCompanyPresenter({ editMode, defaultValues, id });

  const categoryItems =
    companyCategories?.data?.categories?.map((category) => ({
      label: category.name,
      value: category.id,
    })) ?? [];

  return (
    <DynamicFormBuilder<ICreateCompanyCredentials>
      sections={createCompanyFormSections({
        editMode,
        id,
        categoryItems,
        watch,
        setValue,
      })}
      register={register}
      control={control}
      errors={errors}
      handleSubmit={handleSubmit}
      onSubmit={onSubmit}
      className="flex flex-col gap-6"
      sectionsClassName="grid grid-cols-1 items-start gap-6 lg:grid-cols-2"
      header={
        <header className="flex flex-col gap-1">
          <h1 className="text-xl font-bold text-dark dark:text-white">
            {editMode ? "Edit company" : "New company"}
          </h1>
          <p className="text-sm text-dark-5 dark:text-dark-6">
            Profile, business details, address, tags, and supporting documents.
          </p>
        </header>
      }
      footer={<FormFooter />}
      footerPlacement="form"
    />
  );
};

export default CreateCompany;
