/* eslint-disable @typescript-eslint/no-explicit-any */
import { Button } from '@/components/ui/button';
import {
  Form,
  FormControl,
  FormField,
  FormItem,
  FormLabel,
} from '@/components/ui/form';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '@/components/ui/select';
import { Separator } from '@/components/ui/separator';
import { updateRequest } from '@/data/request/update-request';
import { FormFieldType } from '@/types/form-field-type';
import { 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';

const PROVIDERS = [
  { label: 'Pusher', value: 'pusher' },
  { label: 'Ably', value: 'ably' },
];

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

  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();
    fd.append('notification_provider', data.notification_provider ?? 'pusher');

    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('Notification Settings')}</h3>

        <Separator className="my-4" />

        <div className="max-w-sm">
          <FormField
            control={form.control}
            name="notification_provider"
            render={({ field }) => (
              <FormItem>
                <FormLabel>{t('Notification Provider')}</FormLabel>
                <FormControl>
                  <Select value={field.value} onValueChange={field.onChange}>
                    <SelectTrigger>
                      <SelectValue placeholder={t('Select provider')} />
                    </SelectTrigger>
                    <SelectContent>
                      {PROVIDERS.map((opt) => (
                        <SelectItem key={opt.value} value={opt.value}>
                          {opt.label}
                        </SelectItem>
                      ))}
                    </SelectContent>
                  </Select>
                </FormControl>
              </FormItem>
            )}
          />
        </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>
  );
}