import React from 'react';
import { View, Text, TouchableOpacity, StyleSheet } from 'react-native';
import { CHANNEL_COLORS } from '../protocol/constants';
import { useTheme } from '../design/tokens';

interface Props {
  maxChannels: number;
  visible: boolean[];
  onToggle: (idx: number) => void;
}

export function ChannelSelector({ maxChannels, visible, onToggle }: Props) {
  const theme = useTheme();

  return (
    <View style={S.row}>
      {Array.from({ length: maxChannels }, (_, i) => {
        const color = CHANNEL_COLORS[i];
        const active = visible[i];
        return (
          <TouchableOpacity
            key={i}
            style={[
              S.chip,
              { backgroundColor: theme.bg.base, borderColor: active ? color + '88' : theme.bg.border },
              active && { backgroundColor: color + '14' },
            ]}
            onPress={() => onToggle(i)}
            activeOpacity={0.7}
          >
            <View style={[S.dot, { backgroundColor: active ? color : theme.text.ghost }]} />
            <Text style={[S.label, { color: active ? color : theme.text.muted }]}>CH{i + 1}</Text>
          </TouchableOpacity>
        );
      })}
    </View>
  );
}

const S = StyleSheet.create({
  row:  { flexDirection: 'row', flexWrap: 'wrap', gap: 6, paddingHorizontal: 14, paddingVertical: 10 },
  chip: {
    flexDirection: 'row',
    alignItems: 'center',
    gap: 5,
    borderWidth: 1,
    borderRadius: 20,
    paddingHorizontal: 10,
    paddingVertical: 5,
  },
  dot:   { width: 6, height: 6, borderRadius: 3 },
  label: { fontSize: 11, fontWeight: '700', letterSpacing: 0.3 },
});
