import { FormElement } from '@/types/form-types';
import { FormInput } from './FormInput';
import { FormMultiSelect } from './FormMultiSelect';
import { FormDatePicker } from './FormDatePicker';
import { FormSelectPopover } from './FormSelectPopover';
import { memo } from 'react';
import { DateRange } from 'react-day-picker';

export interface BaseFieldProps {
  onBlur: () => void;
  name: string;
}

export interface InputFieldProps extends BaseFieldProps {
  value: string;
  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
  ref: (instance: HTMLInputElement | null) => void;
  disabled?: boolean;
}

export interface SelectFieldProps extends BaseFieldProps {
  value: string | number;
  onChange: (value: string | number) => void;
  ref: (instance: unknown) => void;
}

export interface MultiSelectFieldProps extends BaseFieldProps {
  value: string[];
  onChange: (value: string[]) => void;
  ref: (instance: unknown) => void;
}

export interface DateFieldProps extends BaseFieldProps {
  value: DateRange | undefined | null;
  onChange: (value: DateRange | undefined | null) => void;
  ref: (instance: unknown) => void;
}

interface FormFieldRendererProps {
  form: any;
  element: FormElement & {
    element: 'input' | 'select' | 'date';
    is_multi_select?: boolean;
  };
  field:
    | InputFieldProps
    | SelectFieldProps
    | MultiSelectFieldProps
    | DateFieldProps;
  dropdownOptions?: Array<{
    id: string | number;
    label: string;
    name?: string;
  }>;
  defaultValues?: unknown[] | Record<string, unknown>;
}

export const FormFieldRenderer = memo(
  ({
    form,
    element,
    field,
    dropdownOptions = [],
    defaultValues,
  }: FormFieldRendererProps) => {
    let defaultValue: string | number | string[] | number[] | '' = '';

    if (defaultValues && !Array.isArray(defaultValues)) {
      defaultValue = defaultValues[field.name] as
        | string
        | number
        | string[]
        | number[];
    }

    switch (element.element) {
      case 'input':
        return (
          <FormInput
            element={element}
            field={field as InputFieldProps}
            minLength={element.attributes?.minLength as number}
            maxLength={element.attributes?.maxLength as number}
            defaultValue={defaultValue}
          />
        );

      case 'select':
        if (element.is_multi_select) {
          return (
            <FormMultiSelect
              element={element}
              field={field as MultiSelectFieldProps}
              dropdownOptions={dropdownOptions}
              defaultValues={(defaultValues as string[] | number[]) ?? []}
            />
          );
        }
        return (
          <FormSelectPopover
            form={form}
            element={element}
            field={field as SelectFieldProps}
            dropdownOptions={dropdownOptions}
            defaultValue={defaultValue ?? ''}
          />
        );

      case 'date':
        return (
          <FormDatePicker element={element} field={field as DateFieldProps} />
        );

      default:
        if (process.env.NODE_ENV === 'development') {
          console.warn(`Unsupported form element type: ${element.element}`);
        }
        return null;
    }
  },
  (prevProps, nextProps) => {
    return (
      prevProps.element.element === nextProps.element.element &&
      prevProps.field.value === nextProps.field.value &&
      prevProps.element.is_multi_select === nextProps.element.is_multi_select &&
      prevProps.dropdownOptions?.length === nextProps.dropdownOptions?.length
    );
  },
);
FormFieldRenderer.displayName = 'FormFieldRenderer';