import {SelectBoxProps} from "@/shared/interface";
import {ChangeEvent, Dispatch, SetStateAction} from "react";
import InputField from "@/components/form/InputField";
import TextInput from "@/components/form/TextInput";

interface SuggestFieldInputProps {
    inputFieldName: string;
    inputFieldIcon?: any;
    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 className="bg-secondary/20 rounded-xl p-5 shadow-inner border border-secondary/30">
            <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 border border-secondary/50 rounded-xl shadow-2xl max-h-48 overflow-y-auto backdrop-blur-sm">
                            {filteredTags().map((character: SelectBoxProps) => (
                                <button
                                    key={character.value}
                                    className="w-full text-left px-4 py-2.5 hover:bg-secondary/70 text-text-primary transition-all hover:pl-5 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) => (
                        <div
                            key={tag}
                            className="group bg-primary/90 text-white rounded-full px-4 py-1.5 text-sm font-medium flex items-center gap-2 shadow-md hover:shadow-lg hover:scale-105 transition-all border border-primary-dark"
                        >
                            <span>{getTagLabel(tag)}</span>
                            <button
                                onClick={() => handleRemoveTag(tag)}
                                className="w-5 h-5 flex items-center justify-center rounded-full hover:bg-white/20 transition-all group-hover:scale-110 text-base font-bold"
                            >
                                ×
                            </button>
                        </div>
                    ))
                )}
            </div>
        </div>
    )
}