import { useQuizSettings } from "@/contexts/QuizDataContext";
import { useQuizViewStore } from "@/stores/quizView";
import type { QuizQuestionDate } from "@model/questionTypes/date";
import { DateCalendar } from "@mui/x-date-pickers";
import { quizThemes } from "@utils/themes/Publication/themePublication";
import type { Moment } from "moment";
import moment from "moment";
import { Box, Paper, TextField, useTheme } from "@mui/material";
import { useRootContainerSize } from "@/contexts/RootContainerWidthContext";
import { useTranslation } from "react-i18next";

type DateProps = {
  currentQuestion: QuizQuestionDate;
};

export default ({ currentQuestion }: DateProps) => {
  const theme = useTheme();
  const today = moment();
  const isMobile = useRootContainerSize() < 690;
  const { settings } = useQuizSettings();
  const { updateAnswer } = useQuizViewStore((state) => state);
  const { t } = useTranslation();

  const answers = useQuizViewStore((state) => state.answers);
  const answer = (answers.find(({ questionId }) => questionId === currentQuestion.id)?.answer as string) || ["0", "0"];

  const currentFrom = Number(answer[0]) ? moment(Number(answer[0])) : moment().utc();
  const currentTo = Number(answer[1]) ? moment(Number(answer[1])) : moment().utc();

  const onDateChange = async (date: Moment | null, index: number) => {
    if (!date) return;
    let newAnswer = [...answer];
    newAnswer[index] = (moment(date).unix() * 1000).toString();

    updateAnswer(currentQuestion.id, newAnswer, 0);
  };

  return (
    <Paper
      sx={{
        backgroundColor: settings.cfg.design
          ? quizThemes[settings.cfg.theme].isLight
            ? "#F2F3F7"
            : "rgba(154,154,175, 0.2)"
          : quizThemes[settings.cfg.theme].isLight
            ? "white"
            : theme.palette.background.default,
        width: isMobile ? "min-content" : "auto",
        display: "inline-flex",
        flexWrap: "wrap",
        marginTop: "20px",
        p: "20px",
      }}
    >
      <Box>
        <span style={{ marginLeft: "25px", color: theme.palette.text.primary }}>{t("From")}</span>
        <DateCalendar
          sx={{
            "& .MuiInputBase-root": {
              backgroundColor: settings.cfg.design
                ? quizThemes[settings.cfg.theme].isLight
                  ? "#F2F3F7"
                  : "rgba(154,154,175, 0.2)"
                : quizThemes[settings.cfg.theme].isLight
                  ? "white"
                  : theme.palette.background.default,
              borderRadius: "10px",
              maxWidth: "250px",
              pr: "30px",
              "& input": { py: "11px", pl: "20px", lineHeight: "19px" },
              "& fieldset": { borderColor: "#9A9AAF" },
            },
          }}
          value={currentFrom}
          onChange={(data) => onDateChange(data, 0)}
        />
      </Box>
      <Box>
        <span style={{ marginLeft: "25px", color: theme.palette.text.primary }}>{t("До")}</span>
        <DateCalendar
          minDate={today}
          sx={{
            "& .MuiInputBase-root": {
              backgroundColor: settings.cfg.design
                ? quizThemes[settings.cfg.theme].isLight
                  ? "#F2F3F7"
                  : "rgba(154,154,175, 0.2)"
                : quizThemes[settings.cfg.theme].isLight
                  ? "white"
                  : theme.palette.background.default,
              borderRadius: "10px",
              maxWidth: "250px",
              pr: "30px",
              "& input": { py: "11px", pl: "20px", lineHeight: "19px" },
              "& fieldset": { borderColor: "#9A9AAF" },
            },
          }}
          value={currentTo}
          onChange={(data) => onDateChange(data, 1)}
        />
      </Box>
    </Paper>
  );
};