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

import { ChevronLeft } from "lucide-react";

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

interface QuoteDataForm extends ICreateQuote_Request_DTO {}

export const QuoteCreate = () => {
  const navigate = useNavigate();
  const { setWarnWhen } = useWarnAboutChange();
  const { useCreate } = useQuotes();
  const { mutate } = useCreate();

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

  const { watch, handleSubmit } = form;

  useEffect(() => {
    const subscription = watch((values: any, { type }: { type?: any }) => {
      if (type === "change") {
        // Hay cambios en el formulario
        //setWarnWhen(true);
      }
    });
    return () => subscription.unsubscribe();
  }, [watch, setWarnWhen]);

  const onSubmit: SubmitHandler<QuoteDataForm> = async (formData) => {
    console.log(JSON.stringify(formData));

    try {
      setWarnWhen(false);
      mutate(formData, {
        onSuccess: (data) => {
          navigate(`/quotes/edit/${data.id}`, { relative: "path", replace: true });
        },
      });
    } finally {
      //setLoading(false);
    }
  };

  const onErrors: SubmitErrorHandler<QuoteDataForm> = async (
    errors: FieldErrors<QuoteDataForm>
  ) => {
    console.log(errors);
  };

  return (
    <Form {...form}>
      <form onSubmit={handleSubmit(onSubmit, onErrors)}>
        <div className='mx-auto grid max-w-[90rem] flex-1 auto-rows-max gap-6'>
          <div className='flex items-center gap-4'>
            <Button
              variant='outline'
              size='icon'
              className='h-7 w-7'
              onClick={() => navigate("/quotes")}
            >
              <ChevronLeft className='w-4 h-4' />
              <span className='sr-only'>{t("quotes.common.back")}</span>
            </Button>
            <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'>
              <BackHistoryButton
                size='sm'
                variant={"outline"}
                label={t("quotes.create.buttons.discard")}
                url='/quotes'
              />

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