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 flex-wrap 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}
          extraArgs={{
            text:
              currentSection === undefined || currentSection.text === undefined
                ? ""
                : currentSection.text.content,
          }}
          levelSectionId={focusedSection}
          level={level}
        />
      </Dropdown>
    </>
  );
};

export default ReadingComponents;