import {
Box,
MenuItem,
FormControl,
Checkbox,
FormControlLabel,
Radio,
RadioGroup,
Typography,
useTheme,
Select,
useMediaQuery,
IconButton,
TextField,
} from "@mui/material";
import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";
import { QuizQuestionBase } from "model/questionTypes/shared";
import { useState, useRef, useEffect } from "react";
import { useParams } from "react-router-dom";
import { useQuestionsStore } from "@root/questions/store";
import { updateQuestion, getQuestionById } from "@root/questions/actions";
import { SelectChangeEvent } from "@mui/material/Select";
import CalendarIcon from "@icons/CalendarIcon";
import { DatePicker } from "@mui/x-date-pickers";
import dayjs from "dayjs";
import { TimePicker } from "@mui/x-date-pickers/TimePicker";
import InfoIcon from "@icons/Info";
import { DeleteIcon } from "@icons/questionsPage/deleteIcon";
import type { AnyTypedQuizQuestion } from "../../../model/questionTypes/shared";
import type { QuizQuestionNumber } from "../../../model/questionTypes/number";
const CONDITIONS = [
"Все условия обязательны",
"Обязательно хотя бы одно условие",
];
interface Props {
parentQuestion: AnyTypedQuizQuestion;
targetQuestion: AnyTypedQuizQuestion;
ruleIndex: number;
setParentQuestion: (q: AnyTypedQuizQuestion) => void;
}
// Этот компонент вызывается 1 раз на каждое условие родителя для перехода к этому вопросу. Поэтому для изменения стора мы знаем индекс
export const TypeSwitch = ({
parentQuestion,
targetQuestion,
ruleIndex,
setParentQuestion,
}: Props) => {
switch (parentQuestion.type) {
case "variant":
case "images":
case "varimg":
case "emoji":
case "select":
return parentQuestion.content.variants === undefined ? (
) : (
);
break;
case "date":
return (
);
break;
case "number":
return (
);
break;
case "page":
return (
);
break;
case "text":
return (
);
break;
case "file":
return (
);
break;
case "rating":
return (
);
break;
default:
return ;
break;
}
};
export const BlockRule = ({ text }: { text: string }) => {
return (
{text}
);
};
const SelectorType = ({
parentQuestion,
targetQuestion,
ruleIndex,
setParentQuestion,
}: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
return (
Новое условие
{
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
setParentQuestion(newParentQuestion);
}}
>
Дан ответ
(Укажите один или несколько вариантов)
{
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main[ruleIndex].or = value;
setParentQuestion(newParentQuestion);
}}
>
{CONDITIONS.map((condition, totalIndex) => (
} icon={} />
}
label={condition}
/>
))}
);
};
const DateInputsType = ({
parentQuestion,
targetQuestion,
ruleIndex,
setParentQuestion,
}: Props) => {
const theme = useTheme();
const upLg = useMediaQuery(theme.breakpoints.up("md"));
const time = dayjs(new Date());
const [firstDate, setFirstDate] = useState(time);
const [secondDate, setSecondDate] = useState(time);
const [firstTime, setFirstTime] = useState(time);
const [secondTime, setSecondTime] = useState(time);
useEffect(() => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] = time;
if (newParentQuestion.content.dateRange)
parentQuestion.content.rule.main[ruleIndex].rules[0].answers[1] = time;
setParentQuestion(newParentQuestion);
}, [firstDate, secondDate, firstTime, secondTime]);
return (
Новое условие
{
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
setParentQuestion(newParentQuestion);
}}
>
Дан ответ
(Укажите один или несколько вариантов)
{parentQuestion.content.dateRange && (
(Начало периода)
)}
{
const date = dateString?.toDate().toLocaleDateString("ru-RU", {
year: "numeric",
month: "2-digit",
day: "2-digit",
});
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [
date,
];
setParentQuestion(newParentQuestion);
}}
slots={{
openPickerIcon: () => ,
}}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
p: "10px",
"& .MuiInputBase-root": {
minWidth: "325px",
backgroundColor: "#F2F3F7",
borderRadius: "10px",
pr: "31px",
"& input": {
py: "11px",
pl: upLg ? "20px" : "13px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
{parentQuestion.content.time && (
)}
{parentQuestion.content.dateRange && (
{parentQuestion.content.dateRange && (
(Конец периода)
)}
{}}
slots={{
openPickerIcon: () => ,
}}
slotProps={{
openPickerButton: {
sx: {
p: 0,
},
"data-cy": "open-datepicker",
},
}}
sx={{
p: "10px",
"& .MuiInputBase-root": {
minWidth: "325px",
backgroundColor: "#F2F3F7",
borderRadius: "10px",
pr: "31px",
"& input": {
py: "11px",
pl: upLg ? "20px" : "13px",
lineHeight: "19px",
},
"& fieldset": {
borderColor: "#9A9AAF",
},
},
}}
/>
{parentQuestion.content.time && (
)}
)}
);
};
const NumberInputsType = ({
parentQuestion,
targetQuestion,
ruleIndex,
setParentQuestion,
}: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
return (
Новое условие
{
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
setParentQuestion(newParentQuestion);
}}
>
Дан ответ
(Укажите один или несколько вариантов)
) => {
const newParentQuestion = JSON.parse(
JSON.stringify(parentQuestion),
);
const previousValue =
newParentQuestion.content.rule.main[ruleIndex].rules[0]
.answers[0];
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers[0] =
(parentQuestion as QuizQuestionNumber).content.chooseRange
? previousValue
? `${target.value}—${previousValue.split("—")[1] || 0}`
: `${target.value}—0`
: target.value;
setParentQuestion(newParentQuestion);
}}
/>
{(parentQuestion as QuizQuestionNumber).content.chooseRange && (
) => {
const newParentQuestion = JSON.parse(
JSON.stringify(parentQuestion),
);
const previousValue =
newParentQuestion.content.rule.main[ruleIndex].rules[0]
.answers[0];
newParentQuestion.content.rule.main[
ruleIndex
].rules[0].answers[0] = previousValue
? `${previousValue.split("—")[0] || 0}—${target.value}`
: `0—${target.value}`;
setParentQuestion(newParentQuestion);
}}
/>
)}
);
};
const TextInputsType = ({
parentQuestion,
targetQuestion,
ruleIndex,
setParentQuestion,
}: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
return (
Новое условие
{
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
setParentQuestion(newParentQuestion);
}}
>
Дан ответ
(Укажите текст, при совпадении с которым пользователь попадёт на этот
вопрос)
) => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [
(event.target as HTMLInputElement).value,
];
setParentQuestion(newParentQuestion);
}}
/>
);
};
const FileInputsType = ({
parentQuestion,
targetQuestion,
ruleIndex,
setParentQuestion,
}: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
return (
Новое условие
{
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
setParentQuestion(newParentQuestion);
}}
>
Перевести на этот вопрос если пользователь загрузил файл
) => {
let newParentQuestion = JSON.parse(
JSON.stringify(parentQuestion),
);
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers =
[(event.target as HTMLInputElement).checked];
setParentQuestion(newParentQuestion);
}}
/>
}
label="да"
/>
);
};
const RatingInputsType = ({
parentQuestion,
targetQuestion,
ruleIndex,
setParentQuestion,
}: Props) => {
const theme = useTheme();
const quizId = Number(useParams().quizId);
return (
Новое условие
{
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
newParentQuestion.content.rule.main.splice(ruleIndex, 1);
setParentQuestion(newParentQuestion);
}}
>
Ожидаемое количество ячеек(не более доступного количества)
) => {
let newParentQuestion = JSON.parse(JSON.stringify(parentQuestion));
let valueNumber = Number(
(event.target as HTMLInputElement).value.replace(/[^0-9,\s]/g, ""),
);
valueNumber =
valueNumber > parentQuestion.content.steps
? parentQuestion.content.steps
: valueNumber;
newParentQuestion.content.rule.main[ruleIndex].rules[0].answers = [
valueNumber,
];
setParentQuestion(newParentQuestion);
}}
/>
);
};