ERitors-Scribe-Desktop/components/book/settings/story/Issue.tsx

import {ChangeEvent, useContext, useState} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faPlus, faTrash, faWarning,} from '@fortawesome/free-solid-svg-icons';
import {Issue} from '@/lib/models/Book';
import System from '@/lib/models/System';
import {BookContext} from '@/context/BookContext';
import {SessionContext} from '@/context/SessionContext';
import {AlertContext} from '@/context/AlertContext';
import CollapsableArea from "@/components/CollapsableArea";
import {useTranslations} from "next-intl";
import {LangContext, LangContextProps} from "@/context/LangContext";

interface IssuesProps {
    issues: Issue[];
    setIssues: React.Dispatch<React.SetStateAction<Issue[]>>;
}

export default function Issues({issues, setIssues}: IssuesProps) {
    const t = useTranslations();
    const {lang} = useContext<LangContextProps>(LangContext);
    const {book} = useContext(BookContext);
    const {session} = useContext(SessionContext);
    const {errorMessage} = useContext(AlertContext);
    
    const bookId: string | undefined = book?.bookId;
    const token: string = session.accessToken;
    
    const [newIssueName, setNewIssueName] = useState<string>('');
    
    async function addNewIssue(): Promise<void> {
        if (newIssueName.trim() === '') {
            errorMessage(t("issues.errorEmptyName"));
            return;
        }
        try {
            const issueId: string = await System.authPostToServer<string>('book/issue/add', {
                bookId,
                name: newIssueName,
            }, token, lang);
            if (!issueId) {
                errorMessage(t("issues.errorAdd"));
                return;
            }
            const newIssue: Issue = {
                name: newIssueName,
                id: issueId,
            };
            
            setIssues([...issues, newIssue]);
            setNewIssueName('');
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("issues.errorUnknownAdd"));
            }
        }
    }
    
    async function deleteIssue(issueId: string): Promise<void> {
        if (issueId === undefined) {
            errorMessage(t("issues.errorInvalidId"));
        }
        
        
        try {
            const response: boolean = await System.authDeleteToServer<boolean>(
                'book/issue/remove',
                {
                    bookId,
                    issueId,
                },
                token,
                lang
            );
            if (response) {
                const updatedIssues: Issue[] = issues.filter((issue: Issue): boolean => issue.id !== issueId,);
                setIssues(updatedIssues);
            } else {
                errorMessage(t("issues.errorDelete"));
            }
        } catch (e: unknown) {
            if (e instanceof Error) {
                errorMessage(e.message);
            } else {
                errorMessage(t("issues.errorUnknownDelete"));
            }
        }
    }
    
    function updateIssueName(issueId: string, name: string): void {
        const updatedIssues: Issue[] = issues.map((issue: Issue): Issue => {
            if (issue.id === issueId) {
                return {...issue, name};
            }
            return issue;
        });
        setIssues(updatedIssues);
    }
    
    return (
        <CollapsableArea title={t("issues.title")} children={
            <div className="p-1">
                {issues && issues.length > 0 ? (
                    issues.map((item: Issue) => (
                        <div
                            className="mb-2 bg-secondary/30 rounded-xl p-3 shadow-sm hover:shadow-md transition-all duration-200"
                            key={`issue-${item.id}`}
                        >
                            <div className="flex justify-between items-center">
                                <input
                                    className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200 placeholder:text-muted/60"
                                    value={item.name}
                                    onChange={(e) => updateIssueName(item.id, e.target.value)}
                                    placeholder={t("issues.issueNamePlaceholder")}
                                />
                                <button
                                    className="p-1.5 ml-2 rounded-lg text-error hover:bg-error/20 hover:scale-110 transition-all duration-200"
                                    onClick={() => deleteIssue(item.id)}
                                >
                                    <FontAwesomeIcon icon={faTrash} size="sm"/>
                                </button>
                            </div>
                        </div>
                    ))
                ) : (
                    <p className="text-text-secondary text-center py-2 text-sm">
                        {t("issues.noIssue")}
                    </p>
                )}
                <div className="flex items-center mt-3 bg-secondary/30 p-3 rounded-xl shadow-sm">
                    <input
                        className="flex-1 text-text-primary text-base px-2 py-1 bg-transparent border-b border-secondary/50 focus:outline-none focus:border-primary transition-colors duration-200 placeholder:text-muted/60"
                        value={newIssueName}
                        onChange={(e: ChangeEvent<HTMLInputElement>) => setNewIssueName(e.target.value)}
                        placeholder={t("issues.newIssuePlaceholder")}
                    />
                    <button
                        className="bg-primary w-9 h-9 rounded-full flex justify-center items-center ml-2 text-text-primary shadow-md hover:shadow-lg hover:scale-110 hover:bg-primary-dark transition-all duration-200 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:scale-100"
                        onClick={addNewIssue}
                        disabled={newIssueName.trim() === ''}
                    >
                        <FontAwesomeIcon icon={faPlus}/>
                    </button>
                </div>
            </div>
        } icon={faWarning}/>
    );
}