frontAnswerer/src/pages/ViewPublicationPage/questions/Date.tsx

import dayjs from "dayjs";
import { DatePicker } from "@mui/x-date-pickers";
import { Box, Typography, useTheme } from "@mui/material";
import { modes } from "../../../utils/themes/Publication/themePublication";

import { useQuizViewStore, updateAnswer } from "@root/quizView/store";

import type { QuizQuestionDate } from "../../../model/questionTypes/date";
import CalendarIcon from "@icons/CalendarIcon";
import { enqueueSnackbar } from "notistack";
import { sendAnswer } from "@api/quizRelase";
import { useQuestionsStore } from "@root/quizData/store"

type DateProps = {
  currentQuestion: QuizQuestionDate;
};

export const Date = ({ currentQuestion }: DateProps) => {
  const theme = useTheme();
  const mode = modes;

  const { settings } = useQuestionsStore()
  const { answers } = useQuizViewStore();
  const answer = answers.find(
    ({ questionId }) => questionId === currentQuestion.id
  )?.answer as string;
  const [day, month, year] = answer?.split(".") || [];

  return (
    <Box>
      <Typography variant="h5" color={theme.palette.text.primary}>{currentQuestion.title}</Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
        }}
      >
        <DatePicker
          slots={{
            //@ts-ignore
            openPickerIcon: () => <CalendarIcon sx={{
                "& path": {stroke: theme.palette.primary.main},
                "& rect": {stroke: theme.palette.primary.main}
            }} />,
          }}
          value={dayjs(
            answer
              ? new window.Date(`${month}.${day}.${year}`)
              : new window.Date()
          )}
          onChange={async (date) => {
            if (!date) {
              return;
            }
          
            try {
              await sendAnswer({
                questionId: currentQuestion.id,
                body: new window.Date(date.toDate()).toLocaleDateString("ru-RU", {
                  year: "numeric",
                  month: "2-digit",
                  day: "2-digit",
                }),
                //@ts-ignore
                qid: settings.qid
              })
          
              updateAnswer(
                currentQuestion.id,
                String(
                  new window.Date(date.toDate()).toLocaleDateString("ru-RU", {
                    year: "numeric",
                    month: "2-digit",
                    day: "2-digit",
                  })
                )
              );
            } catch (e) {
              enqueueSnackbar("ответ не был засчитан")
            }
          
          }}
          slotProps={{
            openPickerButton: {
              sx: {
                p: 0,
              },
              "data-cy": "open-datepicker",
            },
              layout: {
                  sx: {backgroundColor: theme.palette.background.default,}
              }
          }}
          sx={{

            "& .MuiInputBase-root": {
              backgroundColor: mode[settings.cfg.theme] ? "white" : theme.palette.background.default,
              borderRadius: "10px",
              maxWidth: "250px",
              pr: "22px",
              "& input": {
                py: "11px",
                pl: "20px",
                lineHeight: "19px",
              },
              "& fieldset": {
                borderColor: "#9A9AAF",
              },
            },

          }}
        />
      </Box>
    </Box>
  );

};