256 lines
6.9 KiB
TypeScript
256 lines
6.9 KiB
TypeScript
import { useState, useEffect } from "react";
|
||
import { Box, Button, useTheme } from "@mui/material";
|
||
|
||
import { useQuizViewStore } from "@root/quizView";
|
||
|
||
import type { AnyTypedQuizQuestion, QuizQuestionBase } from "../../model/questionTypes/shared";
|
||
import { getQuestionByContentId } from "@root/questions/actions";
|
||
import { enqueueSnackbar } from "notistack";
|
||
|
||
type FooterProps = {
|
||
questions: AnyTypedQuizQuestion[];
|
||
setCurrentQuestion: (step: AnyTypedQuizQuestion) => void;
|
||
question: AnyTypedQuizQuestion;
|
||
};
|
||
|
||
export const Footer = ({
|
||
setCurrentQuestion,
|
||
questions,
|
||
question,
|
||
}: FooterProps) => {
|
||
const [disablePreviousButton, setDisablePreviousButton] =
|
||
useState<boolean>(false);
|
||
const [disableNextButton, setDisableNextButton] = useState<boolean>(false);
|
||
const { answers } = useQuizViewStore();
|
||
const theme = useTheme();
|
||
const linear = !questions.find(
|
||
({ content }) => content.rule.parentId === "root"
|
||
);
|
||
|
||
useEffect(() => {
|
||
// Логика для аргумента disabled у кнопки "Назад"
|
||
if (linear) {
|
||
const questionIndex = questions.findIndex(({ id }) => id === question.id);
|
||
|
||
const previousQuestion = questions[questionIndex - 1];
|
||
|
||
if (previousQuestion) {
|
||
setDisablePreviousButton(false);
|
||
} else {
|
||
setDisablePreviousButton(true);
|
||
}
|
||
} else {
|
||
if (question?.content.rule.parentId === "root") {
|
||
setDisablePreviousButton(true);
|
||
} else {
|
||
setDisablePreviousButton(false);
|
||
}
|
||
}
|
||
|
||
// Логика для аргумента disabled у кнопки "Далее"
|
||
const answer = answers.find(
|
||
({ questionId }) => questionId === question.content.id
|
||
);
|
||
|
||
if ("required" in question.content && question.content.required && answer) {
|
||
setDisableNextButton(false);
|
||
|
||
return;
|
||
}
|
||
|
||
if (
|
||
"required" in question.content &&
|
||
question.content.required &&
|
||
!answer
|
||
) {
|
||
setDisableNextButton(true);
|
||
|
||
return;
|
||
}
|
||
|
||
if (linear) {
|
||
const questionIndex = questions.findIndex(({ id }) => id === question.id);
|
||
|
||
const nextQuestion = questions[questionIndex + 1];
|
||
|
||
if (nextQuestion) {
|
||
setDisableNextButton(false);
|
||
} else {
|
||
setDisableNextButton(true);
|
||
}
|
||
} else {
|
||
const nextQuestionId = getNextQuestionId();
|
||
if (nextQuestionId) {
|
||
setDisableNextButton(false);
|
||
} else {
|
||
const nextQuestion = getQuestionByContentId(
|
||
question.content.rule.default
|
||
);
|
||
if (nextQuestion?.type) {
|
||
setDisableNextButton(false);
|
||
} else {
|
||
setDisableNextButton(true);
|
||
}
|
||
}
|
||
}
|
||
}, [question, answers]);
|
||
|
||
const getNextQuestionId = () => {
|
||
if (answers.length) {
|
||
const answer = answers.find(
|
||
({ questionId }) => questionId === question.content.id
|
||
);
|
||
|
||
let readyBeNextQuestion = "";
|
||
|
||
(question as QuizQuestionBase).content.rule.main.forEach(({ next, rules }) => {
|
||
let longerArray = Math.max(
|
||
rules[0].answers.length,
|
||
[answer?.answer].length
|
||
);
|
||
|
||
for (
|
||
var i = 0;
|
||
i < longerArray;
|
||
i++ // Цикл по всем элементам бОльшего массива
|
||
) {
|
||
if (rules[0].answers[i] === answer?.answer) {
|
||
readyBeNextQuestion = next; // Если хоть один элемент отличается, массивы не равны
|
||
}
|
||
}
|
||
});
|
||
|
||
return readyBeNextQuestion;
|
||
}
|
||
};
|
||
|
||
const followPreviousStep = () => {
|
||
if (linear) {
|
||
const questionIndex = questions.findIndex(({ id }) => id === question.id);
|
||
|
||
const previousQuestion = questions[questionIndex - 1];
|
||
|
||
if (previousQuestion) {
|
||
setCurrentQuestion(previousQuestion);
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
if (question?.content.rule.parentId !== "root") {
|
||
const parent = getQuestionByContentId(question?.content.rule.parentId);
|
||
if (parent?.type) {
|
||
setCurrentQuestion(parent);
|
||
} else {
|
||
enqueueSnackbar("не могу получить предыдущий вопрос");
|
||
}
|
||
} else {
|
||
enqueueSnackbar("вы находитесь на первом вопросе");
|
||
}
|
||
};
|
||
|
||
const followNextStep = () => {
|
||
if (linear) {
|
||
const questionIndex = questions.findIndex(({ id }) => id === question.id);
|
||
|
||
const nextQuestion = questions[questionIndex + 1];
|
||
|
||
if (nextQuestion) {
|
||
setCurrentQuestion(nextQuestion);
|
||
}
|
||
|
||
return;
|
||
}
|
||
|
||
const nextQuestionId = getNextQuestionId();
|
||
|
||
if (nextQuestionId) {
|
||
const nextQuestion = getQuestionByContentId(nextQuestionId);
|
||
|
||
if (nextQuestion?.type) {
|
||
setCurrentQuestion(nextQuestion);
|
||
return;
|
||
} else {
|
||
enqueueSnackbar("не могу получить последующий вопрос");
|
||
}
|
||
} else {
|
||
const nextQuestion = getQuestionByContentId(
|
||
question.content.rule.default
|
||
);
|
||
if (nextQuestion?.type) {
|
||
setCurrentQuestion(nextQuestion);
|
||
} else {
|
||
enqueueSnackbar("не могу получить последующий вопрос (дефолтный)");
|
||
}
|
||
}
|
||
};
|
||
|
||
return (
|
||
<Box
|
||
sx={{
|
||
padding: "15px 0",
|
||
borderTop: `1px solid ${theme.palette.grey[400]}`,
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
width: "100%",
|
||
maxWidth: "1000px",
|
||
padding: "0 10px",
|
||
margin: "0 auto",
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
}}
|
||
>
|
||
<Box
|
||
sx={{
|
||
display: "flex",
|
||
alignItems: "center",
|
||
gap: "10px",
|
||
marginRight: "auto",
|
||
color: theme.palette.grey1.main,
|
||
}}
|
||
>
|
||
{/* <Typography>Шаг</Typography>
|
||
<Typography
|
||
sx={{
|
||
display: "flex",
|
||
justifyContent: "center",
|
||
alignItems: "center",
|
||
fontWeight: "bold",
|
||
borderRadius: "50%",
|
||
width: "30px",
|
||
height: "30px",
|
||
color: "#FFF",
|
||
background: theme.palette.brightPurple.main,
|
||
}}
|
||
>
|
||
{stepNumber} */}
|
||
{/* </Typography> */}
|
||
{/* <Typography>Из</Typography>
|
||
<Typography sx={{ fontWeight: "bold" }}>
|
||
{questions.length}
|
||
</Typography> */}
|
||
</Box>
|
||
<Button
|
||
disabled={disablePreviousButton}
|
||
variant="contained"
|
||
sx={{ fontSize: "16px", padding: "10px 15px" }}
|
||
onClick={followPreviousStep}
|
||
>
|
||
← Назад
|
||
</Button>
|
||
<Button
|
||
disabled={disableNextButton}
|
||
variant="contained"
|
||
sx={{ fontSize: "16px", padding: "10px 15px" }}
|
||
onClick={followNextStep}
|
||
>
|
||
Далее →
|
||
</Button>
|
||
</Box>
|
||
</Box>
|
||
);
|
||
};
|