import { useEffect } from 'react';
import { toast } from 'sonner';
import { useParams } from 'react-router-dom';
import { useForm } from 'react-hook-form';

import { Button } from '@/components/ui/formsButton';
import Fallback from '@/components/Fallback';
import Error from '@/pages/Errors';
// import useTitle from '../hooks/useTitle';
import FormElementCard from '@/components/Forms/CreateForm/FormElementCard';
import { Form, FormControl, FormField, FormItem } from '@/components/ui/form';
import {
  useCreateResponseMutation,
  useGetFormQuery,
} from '@/app/backend/endpoints/forms';
import PageTitle from '@/components/Dashboard/PageTitle';

export default function GeneratedForm() {
  const { id } = useParams();

  const {
    data: dataWrap,
    isLoading: isPending,
    isError,
  } = useGetFormQuery(id!);
  const data = dataWrap?.data;

  const [createResponse, { isLoading }] = useCreateResponseMutation();
  const mutation = (response: FormResponseI[]) => {
    createResponse({ formId: id!, data: response })
      .unwrap()
      .then(() => {
        toast.success('Form submitted successfully');
      })
      .catch(() => toast.error('Error submitting form'));
  };

  // useTitle(data?.name || 'Form Builder');

  const form = useForm();

  useEffect(() => {
    if (!data) return;
    const defaultValues: { [x: string]: unknown } = {};
    data.elements.forEach(({ id, type }) => {
      if (['switch', 'checkbox'].includes(type)) defaultValues[id] = false;
      else if (type === 'checklist') defaultValues[id] = [];
      else defaultValues[id] = null;
    });
    form.reset(defaultValues);
  }, [data, form]);

  const onSubmit = (values: { [x: string]: string }) => {
    if (!data) return;

    for (const { id, required, type } of data.elements) {
      if (
        required &&
        (!values[id] || (type === 'checklist' && values[id].length === 0))
      ) {
        toast.error('Please fill all required fields');
        return;
      }
    }

    const response = data.elements
      .filter(({ type }) => !['heading', 'description'].includes(type))
      .map(({ id, label, options, type }) => ({
        elementType: type,
        question: label,
        answer:
          options && type !== 'checklist'
            ? options.find(({ value }) => value === values[id])?.label ?? null
            : values[id] ?? null,
      }));

    mutation(response);
  };

  return (
    <>
      <PageTitle title="GeneratedForm" />

      <Form {...form}>
        <form
          className="flex min-h-[100dvh] flex-col"
          onSubmit={form.handleSubmit(onSubmit)}
        >
          {/* <header className="fixed left-0 right-0 top-0 z-30 border-b bg-white/80 backdrop-blur-sm">
          <div className="mx-auto flex h-16 w-full max-w-[1440px] items-center justify-between px-6">
            <Link to="/">
              <h1 className="font-cursive text-3xl font-bold text-primary">
                Form Builder
              </h1>
            </Link>
            <div className="flex gap-6">
              <ClearFormButton
                disabled={isPending || isLoading}
                onClear={() => form.reset()}
              />
              <Button
                disabled={isPending || !data?.isActive}
                isLoading={isLoading}
              >
                Submit Form
              </Button>
            </div>
          </div>
        </header> */}
          {isPending ? (
            <Fallback />
          ) : isError ? (
            <div className="mt-24">
              <Error fullScreen={false} />
            </div>
          ) : (
            <div className="mx-auto rounded-md mt-16 h-full w-full max-w-[500px] p-5">
              {/* space-y-2 */}
              <ul className=" space-y-6">
                <li className="rounded-md  py-3 text-2xl font-medium">
                  {data?.name}
                </li>
                {data?.elements.map((element) => (
                  <li key={element.id}>
                    <FormField
                      control={form.control}
                      name={element.id}
                      render={({ field }) => (
                        <FormItem>
                          <FormControl>
                            <FormElementCard
                              formElement={element}
                              isView
                              field={field}
                            />
                          </FormControl>
                        </FormItem>
                      )}
                    />
                  </li>
                ))}
                {data?.isActive ? null : (
                  <li className="text-sm font-medium text-rose-700">
                    * Note: The status of this form is closed.
                  </li>
                )}
                <li className="pt-2 flex px-5 justify-between">
                  {/* <ClearFormButton
                    onClear={() => form.reset()}
                    disabled={isLoading}
                    
                  /> */}
                  <Button
                    className="w-full"
                    disabled={!data?.isActive}
                    isLoading={isLoading}
                  >
                    Submit Form
                  </Button>
                </li>
              </ul>
            </div>
          )}
        </form>
      </Form>
    </>
  );
}