import { FieldErrors, useFormContext } from "react-hook-form";

import { FormDebug } from '@erp/core/components';
import { cn } from '@repo/shadcn-ui/lib/utils';
import { InvoiceBasicInfoFields, InvoiceItems, InvoiceRecipient, InvoiceTotals } from '../../components';
import { InvoiceFormData } from "../../schemas";

interface InvoiceUpdateFormProps {
  formId: string;
  onSubmit: (data: InvoiceFormData) => void;
  onError: (errors: FieldErrors<InvoiceFormData>) => void;
  className: string;
}

export const InvoiceUpdateForm = ({
  formId,
  onSubmit,
  onError,
  className,
}: InvoiceUpdateFormProps) => {
  const form = useFormContext<InvoiceFormData>();

  return (
    <form noValidate id={formId} onSubmit={form.handleSubmit(onSubmit, onError)} >
      <section className={cn("bg-white rounded-xl border shadow-xl space-y-6", className)}>
        <div className="w-full p-6 bg-transparent grid grid-cols-1 lg:grid-cols-3 gap-6">
          <InvoiceRecipient className="flex flex-col" />
          <InvoiceBasicInfoFields className="flex flex-col lg:col-span-2" />
        </div>

        <div className='w-full gap-6 px-6'>
          <InvoiceItems />
        </div>
        <div className="w-full p-6 grid grid-cols-1 lg:grid-cols-2">
          <InvoiceTotals className='lg:col-start-2' />
        </div>
        <div className="w-full p-6">
          <FormDebug />
        </div>

      </section>
    </form>
  );
};
