import { FormDebug } from "@erp/core/components";
import { FieldErrors, useFormContext } from "react-hook-form";

import { CustomerFormData } from "../../schemas";
import { CustomerAdditionalConfigFields } from "./customer-additional-config-fields";
import { CustomerAddressFields } from "./customer-address-fields";
import { CustomerBasicInfoFields } from "./customer-basic-info-fields";
import { CustomerContactFields } from './customer-contact-fields';

interface CustomerFormProps {
  formId: string;
  onSubmit: (data: CustomerFormData) => void;
  onError: (errors: FieldErrors<CustomerFormData>) => void;
}

export const CustomerEditForm = ({ formId, onSubmit, onError }: CustomerFormProps) => {
  const form = useFormContext<CustomerFormData>();

  return (
    <form id={formId} onSubmit={form.handleSubmit(onSubmit, onError)}>
      <div className='xl:flex xl:flex-row-reverse xl:items-start'>
        <div className='w-full xl:w-6/12'>
          <FormDebug />
        </div>
        <div className='w-full xl:grow space-y-6'>
          <CustomerBasicInfoFields />
          <CustomerContactFields />
          <CustomerAddressFields />
          <CustomerAdditionalConfigFields />
        </div>
      </div>
    </form>
  );
};
