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 './formPicker.styles';
import { FormPickerProps } from './formPicker.props';

export const FormPicker: React.FC<FormPickerProps> = ({
  label,
  value,
  onValueChange,
  options,
  required = false,
  placeholder = 'Select...',
}) => {
  const { theme: colors } = useTheme();
  const styles = getStyles(colors);

  const selectedOption = options.find(opt => opt.value === value);

  return (
    <View style={styles.container}>
      <Text style={styles.label}>
        {label}
        {required && <Text style={styles.required}>*</Text>}
      </Text>
      <TouchableOpacity
        style={styles.pickerContainer}
        onPress={() => {
          // TODO: Implement modal picker or action sheet
          console.log('Picker pressed');
        }}>
        <Text
          style={[
            styles.pickerText,
            !selectedOption && styles.placeholder,
          ]}>
          {selectedOption?.label || placeholder}
        </Text>
        <Icon name="chevron-down" size={20} color={colors.textSecondary} />
      </TouchableOpacity>
    </View>
  );
};