import { useState, ChangeEvent } from "react";
import {
  Box,
  FormControl,
  FormControlLabel,
  FormLabel,
  Radio,
  RadioGroup,
  Tooltip,
  Typography,
} from "@mui/material";

import InfoIcon from "@icons/InfoIcon";

import type { QuestionVariant } from "model/questionTypes/shared";
import type { QuizQuestionVarImg } from "model/questionTypes/varimg";

interface Props {
  question: QuizQuestionVarImg;
}

export default function Varimg({ question }: Props) {
  const [selectedVariantIndex, setSelectedVariantIndex] = useState<number>(-1);

  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
    setSelectedVariantIndex(
      question.content.variants.findIndex(
        (variant) => variant.answer === event.target.value
      )
    );
  };

  const currentVariant: QuestionVariant | undefined =
    question.content.variants[selectedVariantIndex];

  return (
    <Box
      sx={{
        display: "flex",
        flexWrap: "wrap",
        gap: 2,
      }}
    >
      <FormControl>
        <FormLabel 
            id="quiz-question-radio-group"
            data-cy="question-title"
        >
            {question.title}
        </FormLabel>
        <RadioGroup
          aria-labelledby="quiz-question-radio-group"
          value={currentVariant?.answer ?? ""}
          onChange={handleChange}
        >
          {question.content.variants
            .filter(({ answer }) => answer)
            .map((variant, index) => (
              <FormControlLabel
                key={index}
                value={variant.answer}
                data-cy="variant-answer"
                control={
                    <Radio 
                        inputProps={{
                            "data-cy": "variant-radio",
                        }}
                    />
                }
                label={
                  <Box sx={{ display: "flex", alignItems: "center", gap: 2 }}>
                    <Typography>{variant.answer}</Typography>
                    {variant.hints && (
                      <Tooltip title={variant.hints} placement="right">
                        <Box>
                          <InfoIcon />
                        </Box>
                      </Tooltip>
                    )}
                  </Box>
                }
              />
            ))}
        </RadioGroup>
      </FormControl>
      <Box
        sx={{
          border: "1px solid #E3E3E3",
          maxWidth: "400px",
          display: "flex",
          justifyContent: "center",
          alignItems: "center",
          borderRadius: "8px",
        }}
      >
        {currentVariant?.extendedText ? (
          <img
            src={currentVariant.extendedText}
            data-cy="variant-image"
            alt="question variant"
            style={{
              width: "100%",
              display: "block",
              objectFit: "scale-down",
              flexGrow: 1,
            }}
          />
        ) : (
          <Typography p={2}>
            {selectedVariantIndex === -1
              ? "Выберите вариант"
              : "Картинка отсутствует"}
          </Typography>
        )}
      </Box>
    </Box>
  );
}
