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={
      (event: React.FormEvent<HTMLFormElement>) => {
        event.stopPropagation();
        form.handleSubmit(onSubmit, onError)(event)
      }}>
      <FormDebug />

      <section className={cn("space-y-6 p-6", className)}>
        <div className="w-full bg-transparent grid grid-cols-1 lg:grid-cols-3 gap-4">
          <InvoiceRecipient className="flex flex-col" />
          <InvoiceBasicInfoFields className="flex flex-col lg:col-span-2" />
        </div>

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

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