import React, { useMemo, useState } from "react";
import { Pressable, ScrollView, View } from "react-native";
import { Ionicons } from "@expo/vector-icons";
import { useColorScheme } from "nativewind";
import { MutedText, Text } from "./text";
import { SearchInput } from "./input";
/**
 * Searchable multi-select picker for tags / labels. Designed for lists
 * that can be in the thousands — the list scrolls, fuzzy filters by
 * name, and selected items appear as removable chips above the search.
 *
 * Generic over the tag shape; pass `iconFor` to map your tag's icon
 * value onto an Ionicons glyph.
 */
export function TagMultiSelect({ tags, selectedIds, onToggle, iconFor, listMaxHeight = 240, }) {
    const { colorScheme } = useColorScheme();
    const isDark = colorScheme === "dark";
    const mutedColor = isDark ? "#A3A3A3" : "#737373";
    const [query, setQuery] = useState("");
    const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
    const selectedTags = useMemo(() => selectedIds.map((id) => tags.find((t) => t.id === id)).filter((t) => !!t), [selectedIds, tags]);
    const filteredTags = useMemo(() => {
        const q = query.trim().toLowerCase();
        if (!q) {
            return tags;
        }
        return tags.filter((t) => t.name.toLowerCase().includes(q));
    }, [query, tags]);
    const resolveIcon = (tag) => iconFor ? iconFor(tag) : "pricetag";
    return (<View className="gap-2">
      {selectedTags.length > 0 && (<View className="flex-row flex-wrap gap-1.5">
          {selectedTags.map((tag) => {
                const accent = tag.color ?? mutedColor;
                return (<Pressable key={tag.id} onPress={() => onToggle(tag.id)} className="flex-row items-center gap-1 rounded-md border px-2 py-1 active:opacity-70" style={{ borderColor: `${accent}55` }} accessibilityLabel={`Remove tag ${tag.name}`} accessibilityRole="button">
                <Ionicons name={resolveIcon(tag)} size={12} color={accent}/>
                <Text className="text-xs text-foreground">{tag.name}</Text>
                <Ionicons name="close-circle" size={14} color={mutedColor}/>
              </Pressable>);
            })}
        </View>)}

      <SearchInput value={query} onChangeText={setQuery} placeholder={`Search ${tags.length} tag${tags.length === 1 ? "" : "s"}...`} accessibilityLabel="Search tags"/>

      <View className="rounded-lg border border-border dark:border-neutral-800" style={{ maxHeight: listMaxHeight }}>
        {filteredTags.length === 0 ? (<View className="p-4">
            <MutedText className="text-center text-sm italic">
              {query ? `No tags match "${query}"` : "No tags yet"}
            </MutedText>
          </View>) : (<ScrollView keyboardShouldPersistTaps="handled">
            {filteredTags.map((tag) => {
                const selected = selectedSet.has(tag.id);
                const accent = tag.color ?? mutedColor;
                const selectedColor = isDark ? "#FFFFFF" : "#000000";
                const checkboxColor = selected ? selectedColor : mutedColor;
                return (<Pressable key={tag.id} onPress={() => onToggle(tag.id)} accessibilityLabel={`${selected ? "Deselect" : "Select"} tag ${tag.name}`} accessibilityRole="checkbox" accessibilityState={{ checked: selected }} className="flex-row items-center gap-2 px-3 py-2 active:bg-neutral-100 dark:active:bg-neutral-800">
                  <Ionicons name={selected ? "checkbox" : "square-outline"} size={18} color={checkboxColor}/>
                  <Ionicons name={resolveIcon(tag)} size={14} color={accent}/>
                  <Text className="flex-1 text-sm text-foreground">{tag.name}</Text>
                </Pressable>);
            })}
          </ScrollView>)}
      </View>
    </View>);
}
//# sourceMappingURL=tag-multi-select.jsx.map