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

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

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

  const handleSelect = (optionValue: string) => {
    if (!disabled) {
      onChange(optionValue);
      if (onBlur) onBlur();
    }
  };

  return properties.label ? (
    <View
      style={{
        width: properties.styles.width || properties?.customStyles?.width,
      }}
    >
      {properties.label && (
        <Text style={[properties.labelStyle]}>{properties.label}</Text>
      )}
      <View style={{ gap: 8 }}>
        {(properties.options || [])?.map((option) => (
          <TouchableOpacity
            key={option.value}
            onPress={() => handleSelect(option.value)}
            disabled={disabled || option.disabled}
            style={[
              properties.styles as any,
              properties.customStyles,
              (disabled || option.disabled) && formStyles.disabled,
              { flexDirection: 'row', alignItems: 'center', gap: 6 },
            ]}
          >
            <View
              style={[
                // eslint-disable-next-line react-native/no-inline-styles
                {
                  borderColor: error ? '#ff0000' : '#ddd',
                  borderRadius: 10,
                  borderWidth: 2,
                  width: 20,
                  height: 20,
                  justifyContent: 'center',
                  alignItems: 'center',
                  // backgroundColor: 'gold',
                },
              ]}
            >
              {value === option.value && (
                <View
                  style={[
                    {
                      backgroundColor: '#007AFF',
                      width: 12,
                      height: 12,
                      borderRadius: 6,
                    },
                  ]}
                />
              )}
            </View>

            {/* <Text style={getTextStyles(properties.styles)}>{option.label}</Text> */}
            <Text style={getTextStyles(properties.styles)}>{option.label}</Text>
          </TouchableOpacity>
        ))}
      </View>

      {error && touched && <Text style={formStyles.errorText}>{error}</Text>}
    </View>
  ) : (
    <>
      <View style={{ gap: 8 }}>
        {(properties.options || [])?.map((option) => (
          <TouchableOpacity
            key={option.value}
            onPress={() => handleSelect(option.value)}
            disabled={disabled || option.disabled}
            style={[
              properties.styles as any,
              properties.customStyles,
              (disabled || option.disabled) && formStyles.disabled,
              { flexDirection: 'row', alignItems: 'center', gap: 6 },
            ]}
          >
            <View
              style={[
                // eslint-disable-next-line react-native/no-inline-styles
                {
                  borderColor: error ? '#ff0000' : '#ddd',
                  borderRadius: 10,
                  borderWidth: 2,
                  width: 20,
                  height: 20,
                  justifyContent: 'center',
                  alignItems: 'center',
                  // backgroundColor: 'gold',
                },
              ]}
            >
              {value === option.value && (
                <View
                  style={[
                    {
                      backgroundColor: '#007AFF',
                      width: 12,
                      height: 12,
                      borderRadius: 6,
                    },
                  ]}
                />
              )}
            </View>

            <Text style={properties.labelStyle}>{option.label}</Text>
          </TouchableOpacity>
        ))}
      </View>

      {error && touched && <Text style={formStyles.errorText}>{error}</Text>}
    </>
  );
};

const formStyles = StyleSheet.create({
  container: {
    marginBottom: 16,
  },
  groupLabel: {
    fontSize: 16,
    fontWeight: '500',
    marginBottom: 12,
  },
  required: {
    color: '#ff0000',
  },
  radioContainer: {
    flexDirection: 'row',
    alignItems: 'center',
    marginBottom: 8,
  },
  radio: {
    borderWidth: 2,
    borderRadius: 10,
    justifyContent: 'center',
    alignItems: 'center',
    marginRight: 12,
  },
  radioDot: {
    borderRadius: 5,
  },
  optionLabel: {
    fontSize: 16,
    fontWeight: '400',
    flex: 1,
  },
  disabled: {
    opacity: 0.5,
  },
  disabledOption: {
    color: '#999',
  },
  errorText: {
    color: '#ff0000',
    fontSize: 12,
    marginTop: 4,
  },
});