import React from 'react';
import { TextInput, Text, View, StyleSheet } from 'react-native';
import type { ContentItem, FormProperty } from '../types';
import { getLayoutStyles, getViewStyles } from '../utils/styleKeys';
import type { ContentViewItem } from '../store/contentModel';
interface FormTextareaProps {
  element: ContentItem;
  contentItem: ContentViewItem;
  value: string;
  onChange: (value: string) => void;
  onBlur?: () => void;
  error?: string;
  touched?: boolean;
  disabled?: boolean;
}

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

  const rows = properties.rows || 4;
  // const cols = properties.cols || 50;
  // const minLength = properties.minLength;
  const maxLength = properties.maxLength;

  return properties.label ? (
    <View
      style={{
        width:
          properties.styles.width || properties?.customStyles?.width || '100%',
      }}
    >
      {properties.label && (
        <Text style={[properties.labelStyle]}>{properties.label}</Text>
      )}

      <TextInput
        style={[
          {
            minHeight: 80,
          },
          getViewStyles(properties.styles),
          getViewStyles(properties?.customStyles || {}),
          getLayoutStyles(properties.styles),
          getLayoutStyles(properties?.customStyles || {}),
          // {width: '50%'}
        ]}
        value={value}
        onChangeText={onChange}
        onBlur={onBlur}
        placeholder={properties.placeholder}
        placeholderTextColor="#999"
        multiline
        numberOfLines={rows}
        textAlignVertical="top"
        // editable={!disabled}
        maxLength={maxLength}
        scrollEnabled={true}
        {...properties.customProps}
      />

      {error && touched && <Text style={formStyles.errorText}>{error}</Text>}
    </View>
  ) : (
    <>
      <TextInput
        style={[
          {
            minHeight: 80,
          },
          getViewStyles(properties.styles),
          getViewStyles(properties?.customStyles || {}),
          getLayoutStyles(properties.styles),
          getLayoutStyles(properties?.customStyles || {}),
          // {width: '50%'}
        ]}
        value={value}
        onChangeText={onChange}
        onBlur={onBlur}
        placeholder={properties.placeholder}
        placeholderTextColor="#999"
        multiline
        numberOfLines={rows}
        textAlignVertical="top"
        // editable={!disabled}
        maxLength={maxLength}
        scrollEnabled={true}
        {...properties.customProps}
      />
      {error && touched && <Text style={formStyles.errorText}>{error}</Text>}
    </>
  );
};

const formStyles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  label: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 8,
  },
  required: {
    color: '#ff0000',
  },
  textarea: {
    borderWidth: 1,
    borderColor: '#ddd',
    borderRadius: 8,
    padding: 12,
    fontSize: 16,
    textAlignVertical: 'top',
  },
  errorText: {
    color: '#ff0000',
    fontSize: 12,
    marginTop: 4,
  },
  characterCount: {
    color: '#666',
    fontSize: 12,
    marginTop: 4,
    textAlign: 'right',
  },
});