import { Exercise, LevelExam, LevelPart } from "@/interfaces/exam";
import SettingsEditor from ".";
import Option from "@/interfaces/option";
import Dropdown from "@/components/Dropdown";
import clsx from "clsx";
import ExercisePicker from "../Shared/ExercisePicker";
import useExamEditorStore from "@/stores/examEditor";
import useSettingsState from "../Hooks/useSettingsState";
import { SectionSettings } from "@/stores/examEditor/types";


const LevelSettings: React.FC = () => {

    const {currentModule } = useExamEditorStore();
    const {
        focusedSection,
        difficulty,
        sections,
    } = useExamEditorStore(state => state.modules[currentModule]);

    const { localSettings, updateLocalAndScheduleGlobal } = useSettingsState<SectionSettings>(
        currentModule,
        focusedSection
    );

    const currentSection = sections.find((section) => section.sectionId == focusedSection)!.state as LevelPart;

    const defaultPresets: Option[] = [
        {
            label: "Preset: Multiple Choice",
            value: "Not available."
        },
        {
            label: "Preset: Multiple Choice - Blank Space",
            value: "Welcome to {part} of the {label}. In this section, you'll be asked to select the correct word or group of words that best completes each sentence.\n\nFor each question, carefully read the sentence and click on the option (A, B, C, or D) that you believe is correct. After making your selection, you can proceed to the next question by clicking \"Next\". If you need to review or change your previous answers, you can go back at any time by clicking \"Back\".",
        },
        {
            label: "Preset: Multiple Choice - Underlined",
            value: "Welcome to {part} of the {label}. In this section, you'll be asked to identify the underlined word or group of words that is not correct in each sentence.\n\nFor each question, carefully review the sentence and click on the option (A, B, C, or D) that you believe contains the incorrect word or group of words. After making your selection, you can proceed to the next question by clicking \"Next\". If needed, you can go back to previous questions by clicking \"Back\"."
        },
        {
            label: "Preset: Blank Space",
            value: "Not available."
        },
        {
            label: "Preset: Reading Passage",
            value: "Welcome to {part} of the {label}. In this section, you will read a text and answer the questions that follow.\n\nCarefully read the provided text, then select the correct answer (A, B, C, or D) for each question. After making your selection, you can proceed to the next question by clicking \"Next\". If you need to review or change your answers, you can go back at any time by clicking \"Back\"."
        },
        {
            label: "Preset: Multiple Choice - Fill Blanks",
            value: "Welcome to {part} of the {label}. In this section, you will read a text and choose the correct word to fill in each blank space.\n\nFor each question, carefully read the text and click on the option that you believe best fits the context."
        }
    ];

    return (
        <SettingsEditor
            sectionLabel={`Part ${focusedSection}`}
            sectionId={focusedSection}
            module="level"
            introPresets={defaultPresets}
            preview={()=>{}}
            canPreview={false}
        >
            <div>
                <Dropdown title="Add Exercises" className={
                    clsx(
                        "w-full font-semibold flex justify-between items-center p-4 bg-gradient-to-r border",
                        "bg-ielts-level/70 border-ielts-level hover:bg-ielts-level",
                        "text-white shadow-md transition-all duration-300",
                        localSettings.isExerciseDropdownOpen ? "rounded-t-lg" : "rounded-lg"
                    )
                }
                    contentWrapperClassName={"pt-4 px-2 bg-white rounded-b-lg shadow-md transition-all duration-300 ease-in-out"}
                    open={localSettings.isExerciseDropdownOpen}
                    setIsOpen={(isOpen: boolean) => updateLocalAndScheduleGlobal({ isExerciseDropdownOpen: isOpen })}
                >
                    <ExercisePicker
                    module="level"
                    sectionId={focusedSection}
                    difficulty={difficulty}
                />
                </Dropdown>
            </div>
        </SettingsEditor>
    );
};

export default LevelSettings;
