import React from 'react';
import { Module } from "@/interfaces";
import useExamEditorStore from "@/stores/examEditor";
import Dropdown from "./SettingsDropdown";
import { LevelSectionSettings } from "@/stores/examEditor/types";

interface Props {
  module: Module;
  sectionId: number;
  localSettings: LevelSectionSettings;
  updateLocalAndScheduleGlobal: (updates: Partial<LevelSectionSettings>, schedule?: boolean) => void;
}

const SectionPicker: React.FC<Props> = ({
  module,
  sectionId,
  localSettings,
  updateLocalAndScheduleGlobal
}) => {
  const { dispatch } = useExamEditorStore();
  const [selectedValue, setSelectedValue] = React.useState<number | null>(null);
  
  const sectionState = useExamEditorStore(state =>
    state.modules["level"].sections.find((s) => s.sectionId === sectionId)
  );

  if (sectionState === undefined) return null;
  
  const { readingSection, listeningSection } = sectionState;
  const currentValue = selectedValue ?? (module === "reading" ? readingSection : listeningSection);
  const options = module === "reading" ? [1, 2, 3] : [1, 2, 3, 4];
  const openPicker = module === "reading" ? "isReadingPickerOpen" : "isListeningPickerOpen";

  const handleSectionChange = (value: number) => {
    setSelectedValue(value);
    dispatch({
      type: "UPDATE_SECTION_SINGLE_FIELD",
      payload: {
        sectionId,
        module: "level",
        field: module === "reading" ? "readingSection" : "listeningSection",
        value: value
      }
    });
  };

  const getTitle = () => {
    const section = module === "reading" ? "Passage" : "Section";
    if (!currentValue) return `Choose a ${section}`;
    return `${section} ${currentValue}`;
  };

  return (
    <Dropdown
      title={getTitle()}
      module={module}
      open={localSettings[openPicker]}
      setIsOpen={(isOpen: boolean) =>
        updateLocalAndScheduleGlobal({ [openPicker]: isOpen }, false)
      }
      contentWrapperClassName={`pt-6 px-4 bg-gray-200 rounded-b-lg shadow-md transition-all duration-300 ease-in-out border border-ielts-${module}`}
    >
      <div className="space-y-2 pt-3 pb-3 px-2 border border-gray-200 rounded-lg shadow-inner">
        {options.map((num) => (
          <label
            key={num}
            className={`
              flex items-center space-x-3 font-semibold cursor-pointer p-2 rounded
              transition-colors duration-200
              ${currentValue === num
                ? `bg-ielts-${module}/90 text-white`
                : `hover:bg-ielts-${module}/70 text-gray-700`}
            `}
          >
            <input
              type="radio"
              name={`${module === "reading" ? 'passage' : 'section'}-${sectionId}`}
              value={num}
              checked={currentValue === num}
              onChange={() => handleSectionChange(num)}
              className={`
                h-5 w-5 cursor-pointer
                accent-ielts-${module}
              `}
            />
            <div className="flex items-center space-x-2">
              <span>
                {module === "reading" ? `Passage ${num}` : `Section ${num}`}
              </span>
            </div>
          </label>
        ))}
      </div>
    </Dropdown>
  );
};

export default SectionPicker;