import { useState } from "react";
import { useParams } from "react-router-dom";
import {
  Box,
  Typography,
  RadioGroup,
  FormControlLabel,
  Radio,
  useTheme,
  useMediaQuery,
} from "@mui/material";

import { questionStore, updateQuestionsList } from "@root/questions";

import RadioCheck from "@ui_kit/RadioCheck";
import RadioIcon from "@ui_kit/RadioIcon";

import type { QuizQuestionImages } from "../../../model/questionTypes/images";

type ImagesProps = {
  question: QuizQuestionImages;
};

export const Images = ({ question }: ImagesProps) => {
  const [valueIndex, setValueIndex] = useState<number>(0);
  const quizId = Number(useParams().quizId);
  const { listQuestions } = questionStore();
  const theme = useTheme();
  const totalIndex = listQuestions[quizId].findIndex(
    ({ id }) => question.id === id
  );
  const isTablet = useMediaQuery(theme.breakpoints.down(1000));
  const isMobile = useMediaQuery(theme.breakpoints.down(500));

  return (
    <Box>
      <Typography variant="h5">{question.title}</Typography>
      <RadioGroup
        name={question.id}
        value={valueIndex}
        onChange={({ target }) => setValueIndex(Number(target.value))}
        sx={{
          display: "flex",
          flexWrap: "wrap",
          flexDirection: "row",
          justifyContent: "space-between",
          marginTop: "20px",
        }}
      >
        <Box
          sx={{
            display: "grid",
            gap: "15px",
            gridTemplateColumns: isTablet
              ? isMobile
                ? "repeat(1, 1fr)"
                : "repeat(2, 1fr)"
              : "repeat(3, 1fr)",
            width: "100%",
          }}
        >
          {question.content.variants.map(
            ({ id, answer, extendedText }, index) => (
              <Box
                key={index}
                sx={{
                  borderRadius: "5px",
                  border: `1px solid ${theme.palette.grey2.main}`,
                }}
              >
                <Box
                  sx={{ display: "flex", alignItems: "center", gap: "10px" }}
                >
                  <Box sx={{ width: "100%", height: "300px" }}>
                    {extendedText && (
                      <img
                        src={extendedText}
                        alt=""
                        style={{
                          display: "block",
                          width: "100%",
                          height: "100%",
                          objectFit: "cover",
                        }}
                      />
                    )}
                  </Box>
                </Box>
                <FormControlLabel
                  key={id}
                  sx={{
                    display: "block",
                    textAlign: "center",
                    color: theme.palette.grey2.main,
                    marginTop: "10px",
                  }}
                  value={index}
                  control={
                    <Radio checkedIcon={<RadioCheck />} icon={<RadioIcon />} />
                  }
                  label={answer}
                />
              </Box>
            )
          )}
        </Box>
      </RadioGroup>
    </Box>
  );
};