import {
  BackHistoryButton,
  ErrorOverlay,
  FormDatePickerField,
  FormTextAreaField,
  FormTextField,
  LoadingOverlay,
} from "@/components";
import { t } from "i18next";

import { SubmitButton } from "@/components";
import { useUnsavedChangesNotifier } from "@/lib/hooks";
import { Button, Form } from "@/ui";
import { ICreateQuote_Request_DTO } from "@shared/contexts";
import { SubmitHandler, useForm } from "react-hook-form";
import { useNavigate } from "react-router-dom";
import { toast } from "react-toastify";
import { useQuotes } from "./hooks";

interface QuoteDataForm extends ICreateQuote_Request_DTO {}

export const QuoteCreate = () => {
  const navigate = useNavigate();
  const { useCreate } = useQuotes();
  const { mutate, error: mutateError, isError, isPending } = useCreate();

  const form = useForm<QuoteDataForm>({
    defaultValues: {
      date: new Date(Date.now()).toUTCString(),
      customer_information: "",
      reference: "",
    },
  });

  const { formState, reset, getValues, handleSubmit } = form;
  const { isSubmitting, isDirty } = formState;

  useUnsavedChangesNotifier({
    isDirty,
  });

  const onSubmit: SubmitHandler<QuoteDataForm> = async (formData) => {
    try {
      mutate(formData, {
        onError: (error) => {
          console.debug(error);
          toast.error(error.message);
        },
        onSuccess: (data) => {
          reset(getValues());
          toast.success("Cotización guardada");
          navigate(`/quotes/edit/${data.id}`, { relative: "path", replace: true });
        },
      });
    } finally {
      //setLoading(false);
    }
  };

  if (isSubmitting) {
    return <LoadingOverlay title='Guardando ajustes' />;
  }

  if (isError) {
    return <ErrorOverlay errorMessage={mutateError?.message} />;
  }

  if (isPending) {
    return <LoadingOverlay />;
  }

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit(onSubmit)}>
        <div className='mx-auto grid max-w-[90rem] flex-1 auto-rows-max gap-6'>
          <div className='flex items-center gap-4'>
            <BackHistoryButton />
            <h1 className='flex-1 text-xl font-semibold tracking-tight shrink-0 whitespace-nowrap sm:grow-0'>
              {t("quotes.create.title")}
            </h1>
          </div>

          <div className='grid w-6/12 gap-6 mx-auto'>
            <FormTextField
              className='row-span-2'
              name='reference'
              required
              label={t("quotes.form_fields.reference.label")}
              description={t("quotes.form_fields.reference.desc")}
              placeholder={t("quotes.form_fields.reference.placeholder")}
            />

            <FormDatePickerField
              required
              label={t("quotes.form_fields.date.label")}
              description={t("quotes.form_fields.date.desc")}
              placeholder={t("quotes.form_fields.date.placeholder")}
              name='date'
            />

            <FormTextAreaField
              rows={4}
              className='row-span-2'
              name='customer_information'
              required
              label={t("quotes.form_fields.customer_information.label")}
              description={t("quotes.form_fields.customer_information.desc")}
              placeholder={t("quotes.form_fields.customer_information.placeholder")}
            />

            <div className='flex items-center justify-around gap-2'>
              <Button size='sm' variant={"outline"} onClick={() => navigate("/quotes")}>
                {t("common.discard")}
              </Button>

              <SubmitButton size='sm' label={t("common.continue")}></SubmitButton>
            </div>
          </div>
        </div>
      </form>
    </Form>
  );
};