import React from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { useTheme } from '@theme';
import { getStyles } from './checkboxWithLabel.styles';
import { CheckboxWithLabelProps } from './checkboxWithLabel.props';

export const CheckboxWithLabel: React.FC<CheckboxWithLabelProps> = ({
  label,
  options,
  selectedValues,
  onValueChange,
  singleSelect = false,
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const handlePress = (id: string) => {
    if (singleSelect) {
      // Single select mode - only one can be selected
      onValueChange([id]);
    } else {
      // Multiple select mode - can check all
      if (selectedValues.includes(id)) {
        // Remove from selection
        onValueChange(selectedValues.filter(val => val !== id));
      } else {
        // Add to selection
        onValueChange([...selectedValues, id]);
      }
    }
  };

  const isSelected = (id: string) => selectedValues.includes(id);

  return (
    <View style={styles.container}>
      {label && <Text style={styles.label}>{label}</Text>}
      <View style={styles.checkboxRow}>
        {options.map((option) => (
          <TouchableOpacity
            key={option.id}
            style={styles.checkboxOption}
            onPress={() => handlePress(option.id)}
            activeOpacity={0.7}
          >
            <View
              style={[
                styles.checkbox,
                isSelected(option.id) && styles.checkboxChecked,
              ]}
            >
              {isSelected(option.id) && (
                <Icon name="checkmark" size={16} color="#FFFFFF" />
              )}
            </View>
            <Text style={styles.checkboxLabel}>{option.label}</Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
};