import CollapsableArea from "@/components/CollapsableArea";
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {useState} from "react";
import {faTrash} from "@fortawesome/free-solid-svg-icons";
import InputField from "@/components/form/InputField";
import TextInput from "@/components/form/TextInput";
import {Attribute, CharacterProps} from "@/lib/models/Character";
import {IconDefinition} from "@fortawesome/fontawesome-svg-core";
import {useTranslations} from "next-intl";

interface CharacterSectionElementProps {
    title: string;
    section: keyof CharacterProps;
    placeholder: string;
    icon: IconDefinition;
    selectedCharacter: CharacterProps;
    setSelectedCharacter: (character: CharacterProps) => void;
    handleAddElement: (section: keyof CharacterProps, element: Attribute) => void;
    handleRemoveElement: (
        section: keyof CharacterProps,
        index: number,
        attrId: string,
    ) => void;
}

export default function CharacterSectionElement(
    {
        title,
        section,
        placeholder,
        icon,
        selectedCharacter,
        setSelectedCharacter,
        handleAddElement,
        handleRemoveElement,
    }: CharacterSectionElementProps) {
    const t = useTranslations();
    const [element, setElement] = useState<string>('');
    
    function handleAddNewElement() {
        handleAddElement(section, {id: '', name: element});
        setElement('');
    }
    
    return (
        <CollapsableArea title={title} icon={icon}>
            <div className="space-y-3 p-4 bg-secondary/20 rounded-xl border border-secondary/30">
                {Array.isArray(selectedCharacter?.[section]) &&
                    selectedCharacter?.[section].map((item, index: number) => (
                        <div key={index}
                             className="flex items-center gap-2 bg-secondary/30 rounded-xl border-l-4 border-primary shadow-sm hover:shadow-md transition-all duration-200">
                            <input
                                className="flex-1 bg-transparent text-text-primary px-3 py-2.5 focus:outline-none placeholder:text-muted/60"
                                value={item.name || item.type || item.description || item.history || ''}
                                onChange={(e) => {
                                    const updatedSection = [...(selectedCharacter[section] as any[])];
                                    updatedSection[index].name = e.target.value;
                                    setSelectedCharacter({
                                        ...selectedCharacter,
                                        [section]: updatedSection,
                                    });
                                }}
                                placeholder={placeholder}
                            />
                            <button
                                onClick={() => handleRemoveElement(section, index, item.id)}
                                className="bg-error/90 hover:bg-error w-9 h-9 rounded-full flex items-center justify-center mr-2 shadow-md hover:shadow-lg hover:scale-110 transition-all duration-200"
                            >
                                <FontAwesomeIcon icon={faTrash} className="text-white w-4 h-4"/>
                            </button>
                        </div>
                    ))}
                
                <div className="border-t border-secondary/50 mt-4 pt-4">
                    <InputField
                        input={
                            <TextInput
                                value={element}
                                setValue={(e) => setElement(e.target.value)}
                                placeholder={t("characterSectionElement.newItem", {item: title.toLowerCase()})}
                            />
                        }
                        addButtonCallBack={async () => handleAddNewElement()}
                    />
                </div>
            </div>
        </CollapsableArea>
    )
}