import DatePicker from "react-datepicker";
import { Box, Typography } from "@mui/material";

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

import "react-datepicker/dist/react-datepicker.css";

import type { QuizQuestionDate } from "../../../model/questionTypes/date";

type DateProps = {
  stepNumber: number;
  question: QuizQuestionDate;
};

export const Date = ({ stepNumber, question }: DateProps) => {
  const { answers } = useQuizViewStore();
  const { answer } = answers.find(({ step }) => step === stepNumber) ?? {};

  return (
    <Box>
      <Typography variant="h5">{question.title}</Typography>
      <Box
        sx={{
          display: "flex",
          flexDirection: "column",
          width: "100%",
          marginTop: "20px",
        }}
      >
        <DatePicker
          selected={answer ? new window.Date(answer) : new window.Date()}
          onChange={(date) => updateAnswer(stepNumber, String(date))}
        />
      </Box>
    </Box>
  );
};
