import React from "react";
import SettingsEditor from "..";
import Option from "@/interfaces/option";
import useSettingsState from "../../Hooks/useSettingsState";
import { ReadingExam, ReadingPart } from "@/interfaces/exam";
import { ReadingSectionSettings } from "@/stores/examEditor/types";
import useExamEditorStore from "@/stores/examEditor";
import openDetachedTab from "@/utils/popout";
import { useRouter } from "next/router";
import { usePersistentExamStore } from "@/stores/exam";
import axios from "axios";
import { playSound } from "@/utils/sound";
import { toast } from "react-toastify";
import ReadingComponents from "./components";

const ReadingSettings: React.FC = () => {
    const router = useRouter();

    const {
        setExam,
        setExerciseIndex,
        setPartIndex,
        setQuestionIndex,
        setBgColor,
    } = usePersistentExamStore();

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

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

    const currentSection = sections.find((section) => section.sectionId == focusedSection)?.state as ReadingPart;


    const defaultPresets: Option[] = [
        {
            label: "Preset: Reading Passage 1",
            value: "Welcome to {part} of the {label}. You will read texts relating to everyday topics and situations. These may include advertisements, brochures, manuals, or official documents. Answer questions that test your ability to locate specific information and understand main ideas."
          },
          {
            label: "Preset: Reading Passage 2", 
            value: "Welcome to {part} of the {label}. You will read texts dealing with general interest topics that may include news articles, company policies, or workplace documents. Answer questions testing your understanding of main ideas, specific details, and the author's views."
          },
          {
            label: "Preset: Reading Passage 3",
            value: "Welcome to {part} of the {label}. You will read longer academic texts that may include journal articles, academic essays, or research papers. Answer questions testing your ability to understand complex arguments, identify key points, and follow the development of ideas."
          }
    ];

    const canPreviewOrSubmit = sections.some(
        (s) => (s.state as ReadingPart).exercises && (s.state as ReadingPart).exercises.length > 0
    );

    const submitReading = () => {
        if (title === "") {
            toast.error("Enter a title for the exam!");
            return;
        }
        const exam: ReadingExam = {
            parts: sections.map((s) => {
                const exercise = s.state as ReadingPart;
                return {
                    ...exercise,
                    intro: localSettings.currentIntro,
                    category: localSettings.category
                };
            }),
            isDiagnostic: false,
            minTimer,
            module: "reading",
            id: title,
            variant: sections.length === 3 ? "full" : "partial",
            difficulty,
            private: isPrivate,
            type: type!
        };

        axios.post(`/api/exam/reading`, exam)
            .then((result) => {
                playSound("sent");
                toast.success(`Submitted Exam ID: ${result.data.id}`);
            })
            .catch((error) => {
                console.log(error);
                toast.error(error.response.data.error || "Something went wrong while submitting, please try again later.");
            })
    }

    const preview = () => {
        setExam({
            parts: sections.map((s) => {
                const exercises = s.state as ReadingPart;
                return {
                    ...exercises,
                    intro: s.settings.currentIntro,
                    category: s.settings.category
                };
            }),
            minTimer,
            module: "reading",
            id: title,
            isDiagnostic: false,
            variant: undefined,
            difficulty,
            private: isPrivate,
            type: type!
        } as ReadingExam);
        setExerciseIndex(0);
        setQuestionIndex(0);
        setPartIndex(0);
        setBgColor("bg-white");
        openDetachedTab("popout?type=Exam&module=reading", router)
    }

    return (
        <SettingsEditor
            sectionLabel={`Passage ${focusedSection}`}
            sectionId={focusedSection}
            module="reading"
            introPresets={[defaultPresets[focusedSection - 1]]}
            preview={preview}
            canPreview={canPreviewOrSubmit}
            canSubmit={canPreviewOrSubmit}
            submitModule={submitReading}
        >
            <ReadingComponents
                {...{ localSettings, updateLocalAndScheduleGlobal, currentSection }}
            />
        </SettingsEditor>
    );
};

export default ReadingSettings;