/* eslint-disable @typescript-eslint/no-explicit-any */
import FormRenderer from '@/components/common/form-renderer';
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '@/components/ui/form';
import { Label } from '@/components/ui/label';
import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group';
import { Separator } from '@/components/ui/separator';
import { Textarea } from '@/components/ui/textarea';
import { updateRequest } from '@/data/request/update-request';
import { FormFieldType } from '@/types/form-field-type';
import { CheckCircleIcon, CheckIcon } from '@phosphor-icons/react';
import { useEffect, useTransition } from 'react';
import { useForm } from 'react-hook-form';
import { useTranslation } from 'react-i18next';
import { toast } from 'sonner';

export default function GDPRSettingsForm({
  site,
  defaultValues,
}: {
  site: FormFieldType[];
  defaultValues: any;
}) {
  const [isPending, startTransition] = useTransition();
  const { t } = useTranslation();
  const form = useForm();

  useEffect(() => {
    if (site?.length) {
      form.reset(defaultValues);
    }
    // eslint-disable-next-line react-hooks/exhaustive-deps
  }, [defaultValues, site]);

  const onSubmit = (data: any) => {
    const fd = new FormData();

    Object.entries(data).forEach(([key, value]: any) => {
      if (Array.isArray(value) && value[0] instanceof File) {
        fd.append(key, value[0]);
      } else if (typeof value === 'boolean') {
        fd.append(key, value ? '1' : '0');
      } else if (value !== undefined && value !== null) {
        fd.append(key, value);
      }
    });

    startTransition(async () => {
      const res = await updateRequest({
        url: '/api/admin/settings',
        formData: fd,
      });

      if (res?.success) {
        toast.success(t(res?.message));
      }
    });
  };

  return (
    <Form {...form}>
      <form
        className="mb-4 rounded-xl bg-white p-6 shadow-box"
        onSubmit={form.handleSubmit(onSubmit)}
      >
        <h3 className="text-xl font-medium">{t('GDPR Settings')}</h3>

        <Separator className="my-4" />

        <div className="flex flex-col gap-4 md:flex-row">
          <div className="flex w-full flex-col gap-4">
            {site
              .filter((s: FormFieldType) =>
                ['enable_gdpr', 'gdpr_button_label', 'gdpr_link'].includes(
                  s.key,
                ),
              )
              .map((item: FormFieldType) =>
                item?.key === 'enable_gdpr' ? (
                  <FormField
                    key={item.id}
                    control={form.control}
                    name="enable_gdpr"
                    render={({ field }) => (
                      <FormItem>
                        <FormLabel>{t('GDPR Status')}</FormLabel>
                        <FormControl>
                          <RadioGroup
                            value={String(field.value ?? '0')}
                            onValueChange={field.onChange}
                            className="flex gap-0 rounded-md border border-muted"
                          >
                            {[
                              { value: '1', label: t('Enable') },
                              { value: '0', label: t('Disable') },
                            ].map((option) => {
                              const active =
                                String(field.value ?? '0') === option.value;

                              return (
                                <Label
                                  key={option.value}
                                  data-selected={active}
                                  className="flex h-11 w-full cursor-pointer items-center gap-2 border border-foreground bg-black/5 px-4 font-semibold text-foreground first:rounded-l-md last:rounded-r-md data-[selected=true]:bg-foreground data-[selected=true]:text-white"
                                >
                                  {active && (
                                    <CheckCircleIcon
                                      weight="fill"
                                      size={20}
                                      className="text-white"
                                    />
                                  )}
                                  <RadioGroupItem
                                    value={option.value}
                                    className="hidden"
                                  />
                                  {option.label}
                                </Label>
                              );
                            })}
                          </RadioGroup>
                        </FormControl>
                      </FormItem>
                    )}
                  />
                ) : (
                  <FormRenderer form={form} key={item.id} item={item} />
                ),
              )}
          </div>

          <Separator className="hidden md:block" orientation="vertical" />

          <div className="flex w-full flex-col gap-4">
            {site
              .filter((s) => ['gdpr_text'].includes(s.key))
              .map((item: FormFieldType) => (
                <FormField
                  key={item.id}
                  control={form.control}
                  name={item.key || item.name}
                  render={({ field }) => (
                    <FormItem>
                      <FormLabel className="capitalize">
                        {t('GDPR Text')}
                      </FormLabel>
                      <FormControl>
                        <Textarea
                          placeholder={item.placeholder}
                          {...field}
                          value={field.value ?? ''}
                          className="min-h-40"
                        />
                      </FormControl>
                      <FormMessage />
                    </FormItem>
                  )}
                />
              ))}
          </div>
        </div>

        <Separator className="my-4" />

        <div className="flex justify-end">
          <Button type="submit" loading={isPending} disabled={isPending}>
            <CheckIcon weight="bold" />
            {t('Save Changes')}
          </Button>
        </div>
      </form>
    </Form>
  );
}