import React, { useMemo } from 'react';
import { Pressable, StyleSheet, Text, View } from 'react-native';
import { useTheme, createCommonStyles } from '../../theme';
import type { Tag } from '../../domain/taxonomy/tags';

interface TagPickerProps {
  tags: Tag[];
  selectedNames: string[];
  onToggle: (tag: Tag) => void;
}

/** 标签选择器（主题化，多选 chip）。 */
export function TagPicker({ tags, selectedNames, onToggle }: TagPickerProps) {
  const { theme } = useTheme();
  const commonStyles = useMemo(() => createCommonStyles(theme), [theme]);
  
  return (
    <View style={styles.container}>
      {tags.map(tag => {
        const active = selectedNames.includes(tag.name);
        return (
          <Pressable
            key={tag.id}
            onPress={() => onToggle(tag)}
            style={[
              commonStyles.chip,
              {
                backgroundColor: active ? tag.color : 'transparent',
                borderColor: active ? tag.color : theme.colors.border,
              },
            ]}
          >
            <Text
              style={[
                commonStyles.chipText,
                {
                  color: active ? theme.colors.fgInverse : theme.colors.fgPrimary,
                  fontSize: 13,
                },
              ]}
            >
              #{tag.name}
            </Text>
          </Pressable>
        );
      })}
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flexDirection: 'row', flexWrap: 'wrap', gap: 8, padding: 16 },
});
