import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import { TGatewayFields } from '@/types/deposit.types';
import { getImageUrl } from '@/utils/getImageUrl';
import { CaretDownIcon } from '@phosphor-icons/react';
import dayjs from 'dayjs';
import { useState } from 'react';
import { useTranslation } from 'react-i18next';
import { Button } from '../ui/button';
import { Calendar } from '../ui/calendar';
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '../ui/form';
import { Label } from '../ui/label';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import { Textarea } from '../ui/textarea';
import { FileInput } from './image-drop';

function DatePickerField({
  field,
}: {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  field: any;
}) {
  const { t } = useTranslation();
  const [open, setOpen] = useState(false);
  const selectedDate = field.value ? new Date(field.value) : undefined;

  return (
    <Popover open={open} onOpenChange={setOpen}>
      <PopoverTrigger asChild>
        <Button
          variant="outline"
          data-empty={!field.value}
          className="flex h-11 w-full justify-between rounded-xl border border-white/5 bg-secondary px-3 text-sm font-normal"
        >
          {field.value ? (
            dayjs(field.value).format('MMM DD, YYYY')
          ) : (
            <span>{t('Pick a date')}</span>
          )}
          <CaretDownIcon />
        </Button>
      </PopoverTrigger>
      <PopoverContent
        className="w-auto rounded-2xl border-white/5 bg-black/20 p-0 backdrop-blur-sm"
        align="start"
      >
        <Calendar
          mode="single"
          selected={selectedDate}
          defaultMonth={selectedDate}
          classNames={{
            button_previous: 'p-5 text-white cursor-pointer',
            button_next: 'p-5 text-white cursor-pointer',
            months: 'text-white',
          }}
          onSelect={(date) => {
            field.onChange(date ? dayjs(date).format('YYYY-MM-DD') : '');
            setOpen(false);
          }}
          initialFocus
        />
      </PopoverContent>
    </Popover>
  );
}

export default function FormRendererUser({
  form,
  item,
}: {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  form: any;
  item: TGatewayFields;
}) {
  const label = item?.label;

  if (item.type === 'boolean') {
    return (
      <div className="flex flex-col gap-2">
        <Label className="px-4 font-lexend text-black/50 dark:text-white/50">
          {label}
        </Label>
        <FormField
          control={form.control}
          name={item.name}
          render={({ field }) => (
            <FormItem className="flex h-11 flex-row items-center justify-between rounded-md bg-black/5 px-4">
              <FormLabel className="cursor-pointer capitalize">
                {label}
              </FormLabel>
              <FormControl>
                <Switch
                  checked={!!field.value}
                  onCheckedChange={field.onChange}
                />
              </FormControl>
            </FormItem>
          )}
        />
      </div>
    );
  }

  if (item.type === 'file') {
    return (
      <FormField
        control={form.control}
        name={item.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="px-4 font-lexend text-black/50 dark:text-white/50">
              {label}
            </FormLabel>
            <FormControl>
              <FileInput
                className="rounded-2xl border-white/5 bg-secondary"
                id={item.name}
                defaultValue={
                  typeof field.value === 'string'
                    ? getImageUrl(field.value)
                    : undefined
                }
                onChange={(file) => field.onChange(file)}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    );
  }

  if (item.type === 'image') {
    return (
      <FormField
        control={form.control}
        name={item.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="px-4 font-lexend text-black/50 dark:text-white/50">
              {label}
            </FormLabel>
            <FormControl>
              <FileInput
                className="rounded-2xl border-white/5 bg-white/10"
                id={item.name}
                defaultValue={
                  typeof field.value === 'string'
                    ? getImageUrl(field.value)
                    : undefined
                }
                onChange={(file) => field.onChange(file)}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    );
  }

  if (item.type === 'date') {
    return (
      <FormField
        control={form.control}
        name={item.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="px-4 font-lexend text-black/50 dark:text-white/50">
              {label}
            </FormLabel>
            <FormControl>
              <DatePickerField field={field} />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    );
  }

  if (item.type === 'textarea') {
    return (
      <FormField
        control={form.control}
        name={item.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="px-4 font-lexend text-black/50 dark:text-white/50">
              {label}
            </FormLabel>
            <FormControl>
              <Textarea
                placeholder={item.placeholder}
                className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-white/10"
                required={!!item.required}
                {...field}
              />
            </FormControl>
            <FormMessage />
          </FormItem>
        )}
      />
    );
  }

  return (
    <FormField
      control={form.control}
      name={item.name}
      render={({ field }) => (
        <FormItem>
          <FormLabel className="px-4 font-lexend text-black/50 dark:text-white/50">
            {label}
          </FormLabel>
          <FormControl>
            <Input
              className="rounded-xl border border-black/5 bg-black/5 dark:border-white/5 dark:bg-secondary"
              placeholder={item.placeholder}
              type={item.type}
              required={!!item.required}
              {...field}
              value={field.value ?? ''}
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  );
}