import React, {useState} from 'react';
import {ActChapter, ChapterListProps} from '@/lib/types/chapter';
import SelectBox, {SelectBoxProps} from '@/components/form/SelectBox';
import ActChapterItem from './ActChapter';
import InputField from '@/components/form/InputField';
import Collapse from '@/components/ui/Collapse';
import {useTranslations} from '@/lib/i18n';

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 (
        <Collapse title={t('chapters')} defaultOpen={isExpanded}>
            <div className="space-y-2">
                {chapters && chapters.length > 0 ? (
                    chapters.map(function (chapter: ActChapter): React.JSX.Element {
                        return (
                            <ActChapterItem
                                key={`chapter-${chapter.chapterInfoId}`}
                                chapter={chapter}
                                onUpdateSummary={function (chapterId: string, summary: string): void {
                                    onUpdateChapterSummary(chapterId, summary);
                                }}
                                onUnlink={function (chapterInfoId: string, chapterId: string): Promise<void> {
                                    return onUnlinkChapter(chapterInfoId, chapterId);
                                }}
                            />
                        );
                    })
                ) : (
                    <p className="text-text-secondary text-center text-sm p-2">
                        {t('noLinkedChapter')}
                    </p>
                )}
                <InputField
                    addButtonCallBack={function (): Promise<void> {
                        return onLinkChapter(actId, selectedChapterId);
                    }}
                    input={
                        <SelectBox
                            defaultValue={null}
                            onChangeCallBack={function (e: React.ChangeEvent<HTMLSelectElement>): void {
                                setSelectedChapterId(e.target.value);
                            }}
                            data={mainChaptersData()}
                            placeholder={t('selectChapterPlaceholder')}
                        />
                    }
                    isAddButtonDisabled={!selectedChapterId}
                />
            </div>
        </Collapse>
    );
}