ERitors-Scribe-Desktop/components/book/settings/characters/CharacterSectionElement.tsx

import Collapse from "@/components/ui/Collapse";
import React, {ChangeEvent, useState} from "react";
import {LucideIcon, Trash2} from 'lucide-react';
import IconButton from "@/components/ui/IconButton";
import InputField from "@/components/form/InputField";
import TextInput from "@/components/form/TextInput";
import {Attribute, CharacterAttributeSection, CharacterProps} from "@/lib/types/character";
import {useTranslations} from '@/lib/i18n';


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

export default function CharacterSectionElement(
    {
        title,
        section,
        placeholder,
        icon,
        selectedCharacter,
        setSelectedCharacter,
        handleAddElement,
        handleRemoveElement,
    }: CharacterSectionElementProps): React.JSX.Element {
    const t = useTranslations();
    const [element, setElement] = useState<string>('');
    
    function handleAddNewElement(): void {
        handleAddElement(section, {id: '', name: element});
        setElement('');
    }

    return (
        <Collapse variant="card" title={title} icon={icon}>
            {selectedCharacter[section].map((item: Attribute, index: number): React.JSX.Element => (
                        <div key={index}
                             className="flex items-center gap-2 bg-secondary rounded-xl border-l-4 border-primary transition-colors 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 || ''}
                                onChange={(e: ChangeEvent<HTMLInputElement>): void => {
                                    const updatedSection: Attribute[] = [...selectedCharacter[section]];
                                    updatedSection[index] = {...updatedSection[index], name: e.target.value};
                                    setSelectedCharacter({
                                        ...selectedCharacter,
                                        [section]: updatedSection,
                                    });
                                }}
                                placeholder={placeholder}
                            />
                            <div className="mr-2">
                                <IconButton
                                    icon={Trash2}
                                    variant="danger"
                                    onClick={(): void => handleRemoveElement(section, index, item.id)}
                                />
                            </div>
                        </div>
                    ))}

                <div className="border-t border-secondary mt-4 pt-4">
                    <InputField
                        input={
                            <TextInput
                                value={element}
                                setValue={(e: ChangeEvent<HTMLInputElement>): void => setElement(e.target.value)}
                                placeholder={t("characterSectionElement.newItem", {item: title.toLowerCase()})}
                            />
                        }
                        addButtonCallBack={async (): Promise<void> => handleAddNewElement()}
                    />
                </div>
        </Collapse>
    )
}