import { Input } from '@/components/ui/input';
import { Switch } from '@/components/ui/switch';
import { FormFieldType } from '@/types/form-field-type';
import { getImageUrl } from '@/utils/getImageUrl';
import { replaceDashesWithSpaces } from '@/utils/strHelpers';
import { CaretDownIcon, CheckCircleIcon } from '@phosphor-icons/react';
import dayjs from 'dayjs';
import { useTranslation } from 'react-i18next';
import LoaderIcon from '../icons/loader-icon';
import { Button } from '../ui/button';
import { Calendar } from '../ui/calendar';
import { DatetimePicker } from '../ui/datetime-picker';
import {
  FormControl,
  FormDescription,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '../ui/form';
import { Label } from '../ui/label';
import { Popover, PopoverContent, PopoverTrigger } from '../ui/popover';
import { RadioGroup, RadioGroupItem } from '../ui/radio-group';
import {
  Select,
  SelectContent,
  SelectItem,
  SelectTrigger,
  SelectValue,
} from '../ui/select';
import { Textarea } from '../ui/textarea';
import { FileInput } from './image-drop';

export default function FormRenderer({
  form,
  item,
}: {
  // eslint-disable-next-line @typescript-eslint/no-explicit-any
  form: any;
  item: FormFieldType;
}) {
  const { t } = useTranslation();
  const label = item?.label || replaceDashesWithSpaces(item?.key);
  const isDisabled = item.disabled ?? false;

  if (item.type === 'boolean') {
    return (
      <div className="flex flex-col gap-2">
        <Label>{item?.title}</Label>
        <FormField
          control={form.control}
          name={item.key || 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>
          )}
        />
        {item.helper && <FormDescription>{item.helper}</FormDescription>}
      </div>
    );
  }

  if (item.type === 'file') {
    return (
      <FormField
        control={form.control}
        name={item.key || item.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="capitalize">{label}</FormLabel>
            <FormControl>
              <FileInput
                key={item.resetKey}
                id={item.key || item.name}
                defaultValue={
                  typeof field.value === 'string'
                    ? getImageUrl(field.value)
                    : undefined
                }
                onChange={(file) => field.onChange(file)}
              />
            </FormControl>
            {item.helper && <FormDescription>{item.helper}</FormDescription>}
            <FormMessage />
          </FormItem>
        )}
      />
    );
  }

  if (item.type === 'select') {
    return (
      <FormField
        control={form.control}
        name={item.key || item.name}
        render={({ field }) => (
          <FormItem className="w-full">
            <FormLabel>{label}</FormLabel>
            <FormControl>
              <Select value={field.value} onValueChange={field.onChange}>
                <SelectTrigger>
                  <SelectValue placeholder={item.placeholder || label} />
                </SelectTrigger>
                <SelectContent>
                  {item.isLoading ? (
                    <div className="flex h-32 w-full items-center justify-center gap-2">
                      <LoaderIcon />
                      {t('Loading...')}
                    </div>
                  ) : (
                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
                    item.options?.map((opt: any) => (
                      <SelectItem
                        key={opt.value || opt}
                        value={opt.value || opt}
                      >
                        {opt.label || opt}
                      </SelectItem>
                    ))
                  )}
                </SelectContent>
              </Select>
            </FormControl>
            {item.helper && <FormDescription>{item.helper}</FormDescription>}
          </FormItem>
        )}
      />
    );
  }

  if (item.type === 'radio') {
    return (
      <FormField
        control={form.control}
        name={item.key || item.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="capitalize">{label}</FormLabel>
            <FormControl>
              <RadioGroup
                value={field.value}
                onValueChange={field.onChange}
                className="flex gap-0 rounded-md border border-muted"
              >
                {item.options?.map((opt) => (
                  <Label
                    key={opt.value}
                    data-selected={field.value === opt.value}
                    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"
                  >
                    {field.value === opt.value && (
                      <CheckCircleIcon
                        weight="fill"
                        size={20}
                        className="text-white"
                      />
                    )}

                    <RadioGroupItem value={opt.value} className="hidden" />
                    {opt.label}
                  </Label>
                ))}
              </RadioGroup>
            </FormControl>
            {item.helper && <FormDescription>{item.helper}</FormDescription>}
          </FormItem>
        )}
      />
    );
  }

  if (item.type === 'date') {
    return (
      <FormField
        control={form.control}
        name={item.key || item.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="capitalize">{label}</FormLabel>
            <FormControl>
              <Popover>
                <PopoverTrigger asChild>
                  <Button
                    variant="outline"
                    data-empty={!field.value}
                    className="flex h-11 w-full justify-between rounded-md border border-black/5 bg-black/5 px-3 text-base font-normal"
                  >
                    {field.value ? (
                      dayjs(field.value).format('MMM DD, YYYY')
                    ) : (
                      <span>{t('Pick a date')}</span>
                    )}
                    <CaretDownIcon />
                  </Button>
                </PopoverTrigger>

                <PopoverContent className="w-auto p-0" align="start">
                  <Calendar
                    mode="single"
                    selected={field.value ? new Date(field.value) : undefined}
                    onSelect={(date) => {
                      field.onChange(
                        date ? dayjs(date).format('YYYY-MM-DD') : '',
                      );
                    }}
                    initialFocus
                  />
                </PopoverContent>
              </Popover>
            </FormControl>
            {item.helper && <FormDescription>{item.helper}</FormDescription>}
            <FormMessage />
          </FormItem>
        )}
      />
    );
  }

  if (item.type === 'datetime') {
    return (
      <FormField
        control={form.control}
        name={item.key || item.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="capitalize">{label}</FormLabel>
            <FormControl>
              <DatetimePicker
                value={field.value ?? undefined}
                onChange={field.onChange}
                placeholder={item.placeholder}
                disabled={isDisabled}
              />
            </FormControl>
            {item.helper && <FormDescription>{item.helper}</FormDescription>}
            <FormMessage />
          </FormItem>
        )}
      />
    );
  }

  if (item.type === 'textarea') {
    return (
      <FormField
        control={form.control}
        name={item.key || item.name}
        render={({ field }) => (
          <FormItem>
            <FormLabel className="capitalize">{label}</FormLabel>
            <FormControl>
              <Textarea
                placeholder={item.placeholder || label}
                {...field}
                value={field.value ?? ''}
              />
            </FormControl>
            {item.helper && <FormDescription>{item.helper}</FormDescription>}
            <FormMessage />
          </FormItem>
        )}
      />
    );
  }

  return (
    <FormField
      control={form.control}
      name={item.key || item.name}
      render={({ field }) => (
        <FormItem>
          <FormLabel className="capitalize">{label}</FormLabel>
          <FormControl>
            <Input
              placeholder={item.placeholder || label}
              type={item.type}
              {...field}
              value={field.value ?? ''}
              disabled={isDisabled}
            />
          </FormControl>
          <FormMessage />
        </FormItem>
      )}
    />
  );
}