ERitors-Scribe-Desktop/components/book/settings/story/act/ActChaptersSection.tsx

import {useState} from 'react';
import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faChevronDown, faChevronUp} from '@fortawesome/free-solid-svg-icons';
import {ActChapter, ChapterListProps} from '@/lib/models/Chapter';
import {SelectBoxProps} from '@/shared/interface';
import ActChapterItem from './ActChapter';
import InputField from '@/components/form/InputField';
import SelectBox from '@/components/form/SelectBox';
import {useTranslations} from 'next-intl';

interface ActChaptersSectionProps {
    actId: number;
    chapters: ActChapter[];
    mainChapters: ChapterListProps[];
    onLinkChapter: (actId: number, chapterId: string) => Promise<void>;
    onUpdateChapterSummary: (chapterId: string, summary: string) => void;
    onUnlinkChapter: (chapterInfoId: string, chapterId: string) => Promise<void>;
    sectionKey: string;
    isExpanded: boolean;
    onToggleSection: (sectionKey: string) => void;
}

export default function ActChaptersSection({
                                               actId,
                                               chapters,
                                               mainChapters,
                                               onLinkChapter,
                                               onUpdateChapterSummary,
                                               onUnlinkChapter,
                                               sectionKey,
                                               isExpanded,
                                               onToggleSection,
                                           }: ActChaptersSectionProps) {
    const t = useTranslations('actComponent');
    const [selectedChapterId, setSelectedChapterId] = useState<string>('');
    
    function mainChaptersData(): SelectBoxProps[] {
        return mainChapters.map((chapter: ChapterListProps): SelectBoxProps => ({
            value: chapter.chapterId,
            label: `${chapter.chapterOrder}. ${chapter.title}`,
        }));
    }
    
    return (
        <div className="mb-4">
            <button
                className="flex justify-between items-center w-full bg-secondary/50 p-3 rounded-xl text-left hover:bg-secondary transition-all duration-200 shadow-sm"
                onClick={(): void => onToggleSection(sectionKey)}
            >
                <span className="font-bold text-text-primary">{t('chapters')}</span>
                <FontAwesomeIcon
                    icon={isExpanded ? faChevronUp : faChevronDown}
                    className="text-text-primary w-3.5 h-3.5"
                />
            </button>
            
            {isExpanded && (
                <div className="p-2">
                    {chapters && chapters.length > 0 ? (
                        chapters.map((chapter: ActChapter) => (
                            <ActChapterItem
                                key={`chapter-${chapter.chapterInfoId}`}
                                chapter={chapter}
                                onUpdateSummary={(chapterId, summary) =>
                                    onUpdateChapterSummary(chapterId, summary)
                                }
                                onUnlink={(chapterInfoId, chapterId) =>
                                    onUnlinkChapter(chapterInfoId, chapterId)
                                }
                            />
                        ))
                    ) : (
                        <p className="text-text-secondary text-center text-sm p-2">
                            {t('noLinkedChapter')}
                        </p>
                    )}
                    <InputField
                        addButtonCallBack={(): Promise<void> => onLinkChapter(actId, selectedChapterId)}
                        input={
                            <SelectBox
                                defaultValue={null}
                                onChangeCallBack={(e) => setSelectedChapterId(e.target.value)}
                                data={mainChaptersData()}
                                placeholder={t('selectChapterPlaceholder')}
                            />
                        }
                        isAddButtonDisabled={!selectedChapterId}
                    />
                </div>
            )}
        </div>
    );
}