import React, { useCallback } from "react";
import Dropdown from "../Shared/SettingsDropdown";
import Input from "@/components/Low/Input";
import ExercisePicker from "../../ExercisePicker";
import { generate } from "../Shared/Generate";
import GenerateBtn from "../Shared/GenerateBtn";
import { LevelPart, ReadingPart } from "@/interfaces/exam";
import { LevelSectionSettings, ReadingSectionSettings } from "@/stores/examEditor/types";
import useExamEditorStore from "@/stores/examEditor";

interface Props {
    localSettings: ReadingSectionSettings | LevelSectionSettings;
    updateLocalAndScheduleGlobal: (updates: Partial<ReadingSectionSettings | LevelSectionSettings>, schedule?: boolean) => void;
    currentSection: ReadingPart | LevelPart;
    generatePassageDisabled?: boolean;
    levelId?: number;
    level?: boolean;
}

const ReadingComponents: React.FC<Props> = ({localSettings, updateLocalAndScheduleGlobal, currentSection, levelId, level = false, generatePassageDisabled = false}) => {
    const { currentModule } = useExamEditorStore();
    const {
        focusedSection,
        difficulty,
    } = useExamEditorStore(state => state.modules[currentModule]);

    const generatePassage = useCallback(() => {
        generate(
            levelId ? levelId : focusedSection,
            "reading",
            "passage",
            {
                method: 'GET',
                queryParams: {
                    difficulty,
                    ...(localSettings.readingTopic && { topic: localSettings.readingTopic })
                }
            },
            (data: any) => [{
                title: data.title,
                text: data.text
            }],
            level ? focusedSection : undefined,
            level
        );
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [localSettings.readingTopic, difficulty, focusedSection, levelId]);

    const onTopicChange = useCallback((readingTopic: string) => {
        updateLocalAndScheduleGlobal({ readingTopic });
    }, [updateLocalAndScheduleGlobal]);

    return (
        <>
            <Dropdown
                title="Generate Passage"
                module="reading"
                open={localSettings.isPassageOpen}
                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isPassageOpen: isOpen }, false)}
                contentWrapperClassName={level ? `border border-ielts-reading`: ''}
                disabled={generatePassageDisabled}
            >
                <div className="flex flex-row gap-2 items-center px-2 pb-4">
                    <div className="flex flex-col flex-grow gap-4 px-2">
                        <label className="font-normal text-base text-mti-gray-dim">Topic (Optional)</label>
                        <Input
                            key={`section-${focusedSection}`}
                            type="text"
                            placeholder="Topic"
                            name="category"
                            onChange={onTopicChange}
                            roundness="full"
                            value={localSettings.readingTopic}
                        />
                    </div>
                    <div className="flex self-end h-16 mb-1">
                        <GenerateBtn
                            module="reading"
                            genType="passage"
                            sectionId={focusedSection}
                            generateFnc={generatePassage}
                            level={level}
                        />
                    </div>
                </div>
            </Dropdown>
            <Dropdown
                title="Add Exercises"
                module="reading"
                open={localSettings.isReadingTopicOpean}
                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isReadingTopicOpean: isOpen })}
                contentWrapperClassName={level ? `border border-ielts-reading`: ''}
                disabled={currentSection === undefined || currentSection.text === undefined || currentSection.text.content === "" || currentSection.text.title === ""}
            >
                <ExercisePicker
                    module="reading"
                    sectionId={levelId !== undefined ? levelId : focusedSection}
                    difficulty={difficulty}
                    extraArgs={{ text: currentSection === undefined || currentSection.text === undefined ? "" : currentSection.text.content }}
                    levelSectionId={focusedSection}
                    level={level}
                />
            </Dropdown>
        </>
    );
};

export default ReadingComponents;
