ERitors-Scribe-Desktop/components/ListItem.tsx

import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faArrowDown, faArrowUp, faCheck, faPen, faTrash, faX, IconDefinition} from "@fortawesome/free-solid-svg-icons";
import {ChangeEvent, useState} from "react";
import TextInput from "@/components/form/TextInput";

interface ListItemProps {
    onClick: () => void;
    selectedId: number | string;
    id: number | string;
    icon?: IconDefinition;
    numericalIdentifier?: number;
    isEditable?: boolean;
    text: string;
    handleDelete?: (itemId: string) => void;
    handleUpdate?: (itemId: string, newValue: string, subNewValue: number) => void;
}

export default function ListItem(
    {
        text,
        selectedId,
        id,
        icon,
        onClick,
        isEditable = false,
        handleDelete,
        numericalIdentifier,
        handleUpdate
    }: ListItemProps) {
    
    const [itemHover, setItemHover] = useState<boolean>(false);
    const [editMode, setEditMode] = useState<boolean>(false);
    
    const [newName, setNewName] = useState<string>('');
    const [newChapterOrder, setNewChapterOrder] = useState<number>(numericalIdentifier ?? 0);
    
    function handleEdit(itemName: string): void {
        setNewName(itemName)
        setEditMode(true)
    }
    
    function handleSave(): void {
        if (!handleUpdate) return;
        handleUpdate(id as string, newName, newChapterOrder)
        setEditMode(false);
    }
    
    
    function moveItem(direction: "up" | "down"): void {
        switch (direction) {
            case "up":
                if (newChapterOrder > 0) {
                    setNewChapterOrder(newChapterOrder - 1)
                }
                break;
            case "down":
                if (newChapterOrder < 100) {
                    setNewChapterOrder(newChapterOrder + 1)
                }
                break;
            default:
                break;
        }
    }
    
    return (
        <li onMouseOver={(): void => setItemHover(true)} onMouseLeave={(): void => setItemHover(false)}
            className={`group relative flex items-center p-3 rounded-xl transition-colors duration-200 border-l-4 ${
                selectedId === id
                    ? 'bg-secondary border-primary'
                    : 'bg-secondary/50 hover:bg-secondary border-transparent'
            }`}>
            {
                (numericalIdentifier != null && newChapterOrder >= 0) && (
                    <span className="text-primary font-bold mr-3 text-sm min-w-[24px]">
                        {newChapterOrder >= 0 ? newChapterOrder : numericalIdentifier}.
                    </span>
                )
            }
            {
                icon && (
                    <div className="mr-3 w-8 h-8 rounded-lg bg-primary/10 flex items-center justify-center">
                        <FontAwesomeIcon icon={icon} className={'w-4 h-4 text-primary'}/>
                    </div>
                )
            }
            <div className={'flex justify-between items-center w-full gap-2'}>
                {
                    editMode ? (
                        <div className={'flex gap-2 w-full items-center'}>
                            <div className="flex-1">
                                <TextInput
                                    value={newName ? newName : text}
                                    setValue={(e: ChangeEvent<HTMLInputElement>): void => setNewName(e.target.value)}
                                    placeholder=""
                                />
                            </div>
                            <button
                                className={`p-2 rounded-lg transition-all ${
                                    numericalIdentifier === 0
                                        ? 'text-muted opacity-40 cursor-not-allowed'
                                        : 'text-text-primary hover:text-primary hover:bg-primary/10'
                                }`}
                                onClick={(): void => moveItem('up')}
                                disabled={numericalIdentifier === 0}
                            >
                                <FontAwesomeIcon icon={faArrowUp} size="sm"/>
                            </button>
                            <button
                                className="p-2 rounded-lg text-text-primary hover:text-primary hover:bg-primary/10 transition-all"
                                onClick={(): void => moveItem("down")}
                            >
                                <FontAwesomeIcon icon={faArrowDown} size="sm"/>
                            </button>
                        </div>
                    ) : (
                        <span
                            className={'cursor-pointer text-sm font-medium flex-1 group-hover:text-text-primary transition-colors'}
                            onClick={onClick}>{text}</span>
                    )
                }
                {
                    !editMode && isEditable && (
                        <div
                            className={'absolute right-1 flex gap-0.5 opacity-0 group-hover:opacity-100 transition-opacity'}>
                            <button onClick={(): void => handleEdit(text)}
                                    className="p-1 rounded-lg bg-secondary hover:bg-primary/10 transition-colors">
                                <FontAwesomeIcon icon={faPen} className={'w-3.5 h-3.5 text-primary'}/>
                            </button>
                            <button onClick={(): void | undefined => handleDelete && handleDelete(id.toString())}
                                    className="p-1 rounded-lg bg-secondary hover:bg-error/10 transition-colors">
                                <FontAwesomeIcon icon={faTrash} className={'w-3.5 h-3.5 text-error'}/>
                            </button>
                        </div>
                    )
                }
                {
                    editMode && isEditable && (
                        <div className={'flex gap-1'}>
                            <button onClick={handleSave}
                                    className="p-2 rounded-lg hover:bg-primary/10 transition-all">
                                <FontAwesomeIcon icon={faCheck} className={'w-3.5 h-3.5 text-primary'}/>
                            </button>
                            <button onClick={(): void => setEditMode(false)}
                                    className="p-2 rounded-lg hover:bg-error/10 transition-all">
                                <FontAwesomeIcon icon={faX} className={'w-3.5 h-3.5 text-error'}/>
                            </button>
                        </div>
                    )
                }
            </div>
        </li>
    )
}