import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import { PRIORITY_COLORS } from '@/constants';
import { Priority } from '@/types';
import { useSettings } from '@/theme';

interface PrioritySelectorProps {
  value: Priority;
  onChange: (value: Priority) => void;
}

const priorities: { value: Priority; label: string }[] = [
  { value: 'none', label: 'None' },
  { value: 'low', label: 'Low' },
  { value: 'medium', label: 'Medium' },
  { value: 'high', label: 'High' },
  { value: 'critical', label: 'Critical' },
];

export function PrioritySelector({ value, onChange }: PrioritySelectorProps) {
  const { theme } = useSettings();

  return (
    <View style={styles.container}>
      <Text style={[styles.label, { color: theme.text }]}>Priority</Text>
      <View style={styles.options} accessibilityRole="radiogroup" accessibilityLabel="Priority">
        {priorities.map((priority) => (
          <TouchableOpacity
            key={priority.value}
            style={[
              styles.option,
              { backgroundColor: theme.card, borderColor: theme.borderStrong },
              value === priority.value && { borderColor: theme.accent, backgroundColor: theme.accentSoft, borderWidth: 2 },
            ]}
            onPress={() => onChange(priority.value)}
            activeOpacity={0.8}
            accessibilityRole="radio"
            accessibilityLabel={`${priority.label} priority`}
            accessibilityState={{ selected: value === priority.value }}
          >
            <View style={[
              styles.colorIndicator,
              { backgroundColor: PRIORITY_COLORS[priority.value] },
              value === priority.value && styles.colorIndicatorSelected,
            ]} />
            <Text style={[
              styles.optionText,
              { color: theme.textFaint },
              value === priority.value && { color: theme.accentStrong, fontWeight: '600' },
            ]}>
              {priority.label}
            </Text>
          </TouchableOpacity>
        ))}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    gap: 6,
  },
  label: {
    fontSize: 13,
    fontWeight: '600',
  },
  options: {
    flexDirection: 'row',
    gap: 6,
  },
  option: {
    flex: 1,
    flexDirection: 'row',
    alignItems: 'center',
    justifyContent: 'center',
    gap: 6,
    paddingVertical: 10,
    paddingHorizontal: 8,
    borderRadius: 10,
    borderWidth: 1,
    minHeight: 40,
  },
  colorIndicator: {
    width: 10,
    height: 10,
    borderRadius: 5,
    opacity: 0.6,
  },
  colorIndicatorSelected: {
    opacity: 1,
    width: 12,
    height: 12,
    borderRadius: 6,
  },
  optionText: {
    fontSize: 13,
    fontWeight: '500',
  },
});