
import { useDynamicForm } from '../context/dynamic-form-context';
import { TextField } from '../atoms/text-field';
import { TextArea } from '../atoms/text-area';
import { Select } from '../atoms/select';
import { CheckboxGroup } from '../atoms/check-box-group';
import { RadioGroup } from '../atoms/radio-group';
import { Checkbox } from '../atoms/check-box';
import type { DynamicFormFieldSchema } from '../types/dynamic-form-schema-generated';

interface DynamicFormFieldRendererProps {
  field: DynamicFormFieldSchema;
}

export function DynamicFormField({
  field,
}: DynamicFormFieldRendererProps): React.ReactElement | null {
  const {
    getFieldValue,
    getFieldError,
    getFieldTouched,
    setFieldValue,
    handleChange,
    handleBlur,
  } = useDynamicForm();
  const { name, type } = field;

  const value = getFieldValue(name);
  const error = getFieldError(name);
  const touched = getFieldTouched(name);
  const hasError = Boolean(error && touched);

  const commonProps = {
    name,
    value: String(value || ''),
    onChange: handleChange,
    onBlur: handleBlur,
    error: hasError,
  };

  switch (type) {
    case 'short_text':
    case 'email':
      return (
        <TextField.Root 
          {...commonProps} 
          placeholder={field.placeholder}
          type={type === 'short_text' ? 'text' : type}
        />
      );
    case 'number':
      return (
        <TextField.Root
          {...commonProps}
          inputMode="numeric"
          pattern="[0-9]*"
          placeholder={field.placeholder}
          type="number"
        />
      );
    case 'long_text':
      return <TextArea {...commonProps} placeholder={field.placeholder} rows={4} />;

    case 'dropdown':
      return (
        <Select.Root
          onValueChange={(newValue: string) => {
            void setFieldValue(name, newValue);
          }}
          value={value as string}
        >
          <Select.Trigger placeholder={field.placeholder} />
          <Select.Content>
            {field.options.map((option) => (
              <Select.Item key={option.value} value={String(option.value)}>
                {option.label}
              </Select.Item>
            ))}
          </Select.Content>
        </Select.Root>
      );

    case 'choice':
      return (
        <RadioGroup.Root
          onValueChange={(newValue: string) => {
            void setFieldValue(name, newValue);
          }}
          orientation={field.orientation}
          value={String(value || '')}
        >
          {field.options.map((option) => (
            <RadioGroup.Item key={option.value} value={String(option.value)}>
              {option.label}
            </RadioGroup.Item>
          ))}
        </RadioGroup.Root>
      );

    case 'choices':
      return (
        <CheckboxGroup.Root
          onValueChange={(newValue: string[]) => {
            void setFieldValue(name, newValue);
          }}
          orientation={field.orientation}
          value={Array.isArray(value) ? value.map(String) : []}
        >
          {field.options.map((option) => (
            <CheckboxGroup.Item key={option.value} value={String(option.value)}>
              {option.label}
            </CheckboxGroup.Item>
          ))}
        </CheckboxGroup.Root>
      );

    case 'yes_no':
      return (
        <div style={{ display: 'flex', alignItems: 'flex-start', gap: '8px' }}>
          <Checkbox
            checked={Boolean(value)}
            onCheckedChange={(checked: boolean) => {
              void setFieldValue(name, checked);
            }}
          />
          {field.description ? (
            <div style={{ fontSize: '14px', color: '#666', lineHeight: '1.4' }}>
              {field.description}
            </div>
          ) : null}
        </div>
      );

    default:
      return null;
  }
}
