import { useEffect, useState } from "react";
import {
  Box,
  ButtonBase,
  Divider,
  Tooltip,
  Typography,
  useTheme,
} from "@mui/material";

import InfoIcon from "@icons/InfoIcon";

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

interface Props {
  question: QuizQuestionImages;
}

export default function Images({ question }: Props) {
  const theme = useTheme();
  const [selectedVariants, setSelectedVariants] = useState<number[]>([]);

  function handleVariantClick(index: number) {
    if (!question.content.multi) return setSelectedVariants([index]);

    const newSelectedVariants = [...selectedVariants];
    if (newSelectedVariants.includes(index)) {
      newSelectedVariants.splice(newSelectedVariants.indexOf(index), 1);
    } else {
      newSelectedVariants.push(index);
    }
    setSelectedVariants(newSelectedVariants);
  }

  useEffect(
    function resetSelectedVariants() {
      setSelectedVariants([]);
    },
    [question.content.multi]
  );

  return (
    <Box
      sx={{
        display: "flex",
        flexDirection: "column",
        gap: 1,
      }}
    >
      <Typography variant="h6">{question.title}</Typography>
      <Box
        sx={{
          display: "grid",
          gridTemplateColumns: "repeat(auto-fit, minmax(160px, 1fr))",
          gap: 1,
        }}
      >
        {question.content.variants
          .filter(({ answer }) => answer)
          .map((variant, index) => (
            <ButtonBase
              key={index}
              onClick={() => handleVariantClick(index)}
              data-cy="variant-button"
              data-checked={selectedVariants.includes(index)}
              sx={{
                display: "flex",
                flexDirection: "column",
                borderRadius: "8px",
                overflow: "hidden",
                border: "1px solid",
                borderColor: selectedVariants.includes(index)
                  ? theme.palette.brightPurple.main
                  : "#E3E3E3",
              }}
            >
              {variant.extendedText ? (
                <img
                  src={variant.extendedText}
                  alt="question variant"
                  style={{
                    width: "100%",
                    display: "block",
                    objectFit: "scale-down",
                    flexGrow: 1,
                  }}
                />
              ) : (
                <Typography p={2}>Картинка отсутствует</Typography>
              )}
              <Divider sx={{ width: "100%" }} />
              <Box
                sx={{
                  display: "flex",
                  alignItems: "center",
                  justifyContent: "space-between",
                  gap: 2,
                  p: 1,
                }}
              >
                <Typography>{variant.answer}</Typography>
                {variant.hints && (
                  <Tooltip title={variant.hints} placement="right">
                    <Box>
                      <InfoIcon />
                    </Box>
                  </Tooltip>
                )}
              </Box>
            </ButtonBase>
          ))}
      </Box>
    </Box>
  );
}
