import { AppBreadcrumb, AppContent } from "@repo/rdx-ui/components";
import { Button } from "@repo/shadcn-ui/components";
import { useTranslation } from "react-i18next";
import { useNavigate } from "react-router-dom";
import { useCreateCustomerInvoiceMutation } from "../../hooks";
import { MODULE_NAME } from "../../manifest";
import { CustomerInvoiceEditForm } from "./customer-invoice-edit-form";

export const CustomerInvoiceCreate = () => {
  const { t } = useTranslation(MODULE_NAME);
  const navigate = useNavigate();

  const { mutate, isPending, isError, error } = useCreateCustomerInvoiceMutation();

  const handleSubmit = (data: any) => {
    // Handle form submission logic here
    console.log("Form submitted with data:", data);
    mutate(data);

    // Navigate to the list page after submission
    navigate("/customer-invoices/list");
  };

  if (isError) {
    console.error("Error creating customer invoice:", error);
    // Optionally, you can show an error message to the user
  }

  // Render the component
  // You can also handle loading state if needed
  // For example, you can disable the submit button while the mutation is in progress
  // const isLoading = useCreateCustomerInvoiceMutation().isLoading;

  // Return the JSX for the component
  // You can customize the form and its fields as needed
  // For example, you can use a form library like react-hook-form or Formik to handle form state and validation
  // Here, we are using a simple form with a submit button

  // Note: Make sure to replace the form fields with your actual invoice fields
  // and handle validation as needed.
  // This is just a basic example to demonstrate the structure of the component.

  // If you are using a form library, you can pass the handleSubmit function to the form's onSubmit prop
  // and use the form library's methods to handle form state and validation.

  // Example of a simple form submission handler
  // You can replace this with your actual form handling logic
  // const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
  //   event.preventDefault();
  //   const formData = new FormData(event.currentTarget);

  return (
    <>
      <AppBreadcrumb />
      <AppContent>
        <div className='flex items-center justify-between space-y-2'>
          <div>
            <h2 className='text-2xl font-bold tracking-tight'>{t("pages.create.title")}</h2>
            <p className='text-muted-foreground'>{t("pages.create.description")}</p>
          </div>
          <div className='flex items-center justify-end mb-4'>
            <Button className='cursor-pointer' onClick={() => navigate("/customer-invoices/list")}>
              {t("pages.create.back_to_list")}
            </Button>
          </div>
        </div>
        <div className='flex flex-col w-full h-full py-4 @container'>
          <CustomerInvoiceEditForm onSubmit={handleSubmit} isPending={isPending} />
        </div>
      </AppContent>
    </>
  );
};

/*
  return (
    <>
      <div className='flex items-center justify-between space-y-2'>
        <div>
          <h2 className='text-2xl font-bold tracking-tight'>
            {t('customerInvoices.list.title' />
          </h2>
          <p className='text-muted-foreground'>
            {t('CustomerInvoices.list.subtitle' />
          </p>
        </div>
        <div className='flex items-center space-x-2'>
          <Button onClick={() => navigate("/CustomerInvoices/add")}>
            <PlusIcon className='w-4 h-4 mr-2' />
            {t("customerInvoices.create.title")}
          </Button>
        </div>
      </div>

      <Tabs value={status} onValueChange={setStatus}>
        <div className='flex flex-col items-start justify-between mb-4 sm:flex-row sm:items-center'>
          <div className='w-full mb-4 sm:w-auto sm:mb-0'>
            <TabsList className='hidden sm:flex'>
              {CustomerInvoiceStatuses.map((s) => (
                <TabsTrigger key={s.value} value={s.value}>
                  {s.label}
                </TabsTrigger>
              ))}
            </TabsList>
            <div className='flex items-center w-full space-x-2 sm:hidden'>
              <Label>{t("customerInvoices.list.tabs_title")}</Label>
              <Select value={status} onValueChange={setStatus}>
                <SelectTrigger>
                  <SelectValue placeholder='Seleccionar estado' />
                </SelectTrigger>
                <SelectContent>
                  {CustomerInvoiceStatuses.map((s) => (
                    <SelectItem key={s.value} value={s.value}>
                      {s.label}
                    </SelectItem>
                  ))}
                </SelectContent>
              </Select>
            </div>
          </div>
        </div>
        {CustomerInvoiceStatuses.map((s) => (
          <TabsContent key={s.value} value={s.value}>
            <CustomerInvoicesGrid />
          </TabsContent>
        ))}
      </Tabs>
    </>
  );
};
*/