98 lines
3.2 KiB
TypeScript
98 lines
3.2 KiB
TypeScript
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; |