import React from 'react';
import { TextInput, Text, View, StyleSheet } from 'react-native';
import type { ContentItem, FormProperty } from '../types';
import type { ContentViewItem } from '../store/contentModel';
import { getLayoutStyles, getViewStyles } from '../utils/styleKeys';

interface FormInputProps {
  element: ContentItem;
  contentItem: ContentViewItem;
  value: string;
  onChange: (value: string) => void;
  onBlur?: () => void;
  error?: string;
  touched?: boolean;
  disabled?: boolean;
}

export const FormInput: React.FC<FormInputProps> = ({
  element,
  value,
  onChange,
  onBlur,
  error,
  touched,
  disabled,
}) => {
  const data = element.data as FormProperty;

  const getKeyboardType = () => {
    switch (data.inputMode) {
      case 'text':
        return 'default';
      case 'email':
        return 'email-address';
      case 'numeric':
        return 'numeric';
      case 'decimal':
        return 'decimal-pad';
      case 'tel':
        return 'phone-pad';
      case 'url':
        return 'url';
      case 'search':
        return 'default';
      default:
        return 'default';
    }
  };

  const getAutoCapitalize = () => {
    switch (data.inputMode) {
      case 'email':
        return 'none';
      default:
        return 'sentences';
    }
  };

  return data.label ? (
    <View
      style={{
        width: data.styles.width || data?.customStyles?.width,
      }}
    >
      <Text style={[data.labelStyle]}>{data.label}</Text>

      <TextInput
        style={[
          getViewStyles(data.styles),
          getViewStyles(data.customStyles || {}),
          getLayoutStyles(data.styles),
          getLayoutStyles(data.customStyles || {}),
          { width: '100%' },
        ]}
        value={value}
        onChangeText={onChange}
        onBlur={onBlur}
        placeholder={data.placeholder}
        placeholderTextColor="#999"
        secureTextEntry={data.secureTextEntry}
        keyboardType={getKeyboardType()}
        autoCapitalize={getAutoCapitalize()}
        autoCorrect={data.inputMode !== 'email'}
        editable={!disabled}
        maxLength={data.maxLength}
        multiline={false}
        {...data?.customProps}
      />

      {error && touched && <Text style={formStyles.errorText}>{error}</Text>}
    </View>
  ) : (
    <View
      style={{
        width: data.styles.width || data?.customStyles?.width,
      }}
    >
      <TextInput
        style={[
          getViewStyles(data.styles),
          getViewStyles(data.customStyles || {}),
          getLayoutStyles(data.styles),
          getLayoutStyles(data.customStyles || {}),
          { width: '100%' },
        ]}
        value={value}
        onChangeText={onChange}
        onBlur={onBlur}
        placeholder={data.placeholder}
        secureTextEntry={data.secureTextEntry}
        keyboardType={getKeyboardType()}
        autoCapitalize={getAutoCapitalize()}
        autoCorrect={data.inputMode !== 'email'}
        editable={!disabled}
        maxLength={data.maxLength}
        multiline={false}
        {...data?.customProps}
      />
      {error && touched && <Text style={formStyles.errorText}>{error}</Text>}
    </View>
  );
};

const formStyles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  label: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 8,
  },
  required: {
    color: '#ff0000',
  },
  input: {
    borderWidth: 1,
    borderColor: '#ccc',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
  },
  errorText: {
    color: '#ff0000',
    fontSize: 12,
    marginTop: 4,
  },
});