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


interface Props {
    localSettings: WritingSectionSettings | LevelSectionSettings;
    updateLocalAndScheduleGlobal: (updates: Partial<WritingSectionSettings | LevelSectionSettings>, schedule?: boolean) => void;
    currentSection?: WritingExercise;
    level?: boolean;
}

const WritingComponents: React.FC<Props> = ({localSettings, updateLocalAndScheduleGlobal, level}) => {
    const { currentModule } = useExamEditorStore();
    const {
        difficulty,
        focusedSection,
    } = useExamEditorStore((store) => store.modules["writing"]);

    const generatePassage = useCallback((sectionId: number) => {
        generate(
            sectionId,
            currentModule,
            "writing",
            {
                method: 'GET',
                queryParams: {
                    difficulty,
                    ...(localSettings.writingTopic && { topic: localSettings.writingTopic })
                }
            },
            (data: any) => [{
                prompt: data.question
            }]
        );
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [localSettings.writingTopic, difficulty]);

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

    return (
        <>
            <Dropdown
                title="Generate Instructions"
                module={"writing"}
                open={localSettings.isWritingTopicOpen}
                setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isWritingTopicOpen: isOpen }, false)}
                contentWrapperClassName={level ? `border border-ielts-writing`: ''}
            >

                <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.writingTopic}
                        />
                    </div>
                    <div className="flex self-end h-16 mb-1">
                        <GenerateBtn
                            genType="writing"
                            module={"writing"}
                            sectionId={focusedSection}
                            generateFnc={generatePassage}
                        />
                    </div>
                </div>
            </Dropdown>
        </>
    );
};

export default WritingComponents;
