import {SelectBoxProps} from "@/components/form/SelectBox";
import React, {ChangeEvent, Dispatch, SetStateAction} from "react";
import {LucideIcon} from "lucide-react";
import InputField from "@/components/form/InputField";
import TextInput from "@/components/form/TextInput";
import Badge from "@/components/ui/Badge";

interface SuggestFieldInputProps {
    inputFieldName: string;
    inputFieldIcon?: LucideIcon;
    searchTags: string;
    tagued: string[];
    handleTagSearch: (e: ChangeEvent<HTMLInputElement>) => void;
    handleAddTag: (characterId: string) => void;
    handleRemoveTag: (characterId: string) => void;
    filteredTags: () => SelectBoxProps[];
    showTagSuggestions: boolean;
    setShowTagSuggestions: Dispatch<SetStateAction<boolean>>;
    getTagLabel: (id: string) => string;
}

export default function SuggestFieldInput(
    {
        inputFieldName,
        inputFieldIcon,
        searchTags,
        tagued,
        handleTagSearch,
        handleAddTag,
        handleRemoveTag,
        filteredTags,
        showTagSuggestions,
        setShowTagSuggestions,
        getTagLabel
    }: SuggestFieldInputProps) {
    return (
        <div>
            <InputField fieldName={inputFieldName} icon={inputFieldIcon} input={
                <div className="w-full mb-3 relative">
                    <TextInput value={searchTags} setValue={handleTagSearch}
                               onFocus={() => setShowTagSuggestions(searchTags.trim().length > 0)}
                               placeholder="Rechercher et ajouter..."/>
                    {showTagSuggestions && filteredTags().length > 0 && (
                        <div
                            className="absolute top-full left-0 right-0 z-10 mt-2 bg-tertiary rounded-xl max-h-48 overflow-y-auto">
                            {filteredTags().map((character: SelectBoxProps) => (
                                <button
                                    key={character.value}
                                    className="w-full text-left px-4 py-2.5 hover:bg-secondary text-text-primary transition-colors duration-150 first:rounded-t-xl last:rounded-b-xl font-medium"
                                    onClick={() => handleAddTag(character.value)}
                                >
                                    {character.label}
                                </button>
                            ))}
                        </div>
                    )}
                </div>
            }/>
            <div className="flex flex-wrap gap-2">
                {tagued.length === 0 ? (
                    <p className="text-text-secondary text-sm italic">Aucun élément ajouté</p>
                ) : (
                    tagued.map((tag: string) => (
                        <Badge key={tag} variant="primary" size="md" interactive>
                            <span>{getTagLabel(tag)}</span>
                            <button
                                onClick={() => handleRemoveTag(tag)}
                                className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-text-primary/20 transition-colors duration-150 text-base font-bold"
                            >
                                ×
                            </button>
                        </Badge>
                    ))
                )}
            </div>
        </div>
    )
}