import { useTranslate } from '@/hooks/common-hooks';
import { cn } from '@/lib/utils';
import { forwardRef } from 'react';
import { useFormContext } from 'react-hook-form';
import { SingleFormSlider } from '../ui/dual-range-slider';
import {
  FormControl,
  FormField,
  FormItem,
  FormLabel,
  FormMessage,
} from '../ui/form';
import { NumberInput } from '../ui/input';
import { Switch } from '../ui/switch';

type SliderInputSwitchFormFieldProps = {
  max?: number;
  min?: number;
  step?: number;
  name: string;
  label: string;
  defaultValue?: number;
  onChange?: (value: number) => void;
  className?: string;
  checkName: string;
  numberInputClassName?: string;
};

export const SliderInputSwitchFormField = forwardRef<
  HTMLDivElement,
  SliderInputSwitchFormFieldProps
>(
  (
    {
      max,
      min,
      step,
      label,
      name,
      defaultValue,
      onChange,
      className,
      checkName,
      numberInputClassName,
    },
    ref,
  ) => {
    const form = useFormContext();
    const disabled = !form.watch(checkName);
    const { t } = useTranslate('chat');

    return (
      <FormField
        control={form.control}
        name={name}
        defaultValue={defaultValue}
        render={({ field }) => (
          <FormItem>
            <FormLabel tooltip={t(`${label}Tip`)}>{t(label)}</FormLabel>
            <div
              ref={ref}
              className={cn(
                'flex items-center gap-4 justify-between',
                className,
              )}
            >
              <FormField
                control={form.control}
                name={checkName}
                render={({ field }) => (
                  <FormItem>
                    <FormControl>
                      <Switch
                        checked={field.value}
                        onCheckedChange={field.onChange}
                      />
                    </FormControl>
                    <FormMessage />
                  </FormItem>
                )}
              />
              <FormControl>
                <SingleFormSlider
                  {...field}
                  onChange={(value: number) => {
                    onChange?.(value);
                    field.onChange(value);
                  }}
                  max={max}
                  min={min}
                  step={step}
                  disabled={disabled}
                ></SingleFormSlider>
              </FormControl>
              <FormControl>
                <NumberInput
                  disabled={disabled}
                  className={cn(
                    'h-6 w-10 p-1 border border-border-button rounded-sm',
                    numberInputClassName,
                  )}
                  max={max}
                  min={min}
                  step={step}
                  {...field}
                  onChange={(value: number) => {
                    onChange?.(value);
                    field.onChange(value);
                  }}
                ></NumberInput>
              </FormControl>
            </div>
            <FormMessage />
          </FormItem>
        )}
      />
    );
  },
);

SliderInputSwitchFormField.displayName = 'SliderInputSwitchFormField';
