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

import { FormDebug } from '@erp/core/components';
import { cn } from '@repo/shadcn-ui/lib/utils';
import { InvoiceFormData } from "../../schemas";
import { InvoiceBasicInfoFields } from "./invoice-basic-info-fields";
import { InvoiceItems } from './invoice-items-editor';
import { InvoiceTotals } from './invoice-totals';
import { InvoiceRecipient } from "./recipient";

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

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

  return (
    <form noValidate id={formId} onSubmit={form.handleSubmit(onSubmit, onError)} >
      <section className={cn("space-y-6", className)}>
        <div className="w-full border p-6 bg-background">
          <InvoiceBasicInfoFields className="flex flex-col" />
          <InvoiceRecipient className='lg:col-span-1  border p-6 bg-background' />
        </div>

        <div className='w-full gap-6'>
          <InvoiceItems />
        </div>
        <div className="w-full border p-6 bg-background">
          <InvoiceTotals />
        </div>
        <div className="w-full border p-6 bg-background">
          <FormDebug />
        </div>

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