import { Box, Button, Tooltip, useMediaQuery, useTheme } from "@mui/material";
import { updateQuiz } from "@root/quizes/actions";
import { useCurrentQuiz } from "@root/quizes/hooks";
import image from "@/assets/Rectangle 110.png";
import Info from "@/assets/icons/Info";
import TooltipClickInfo from "@ui_kit/Toolbars/TooltipClickInfo";

export const Result = () => {
  const quiz = useCurrentQuiz();
  const theme = useTheme();
  const isMobile = useMediaQuery(theme.breakpoints.down(650));
  if (!quiz) return null;

  return (
    <Box component="section">
      <Box sx={{ display: "flex", mt: "30px", alignItems: "center" }}>
        <Button
          variant="contained"
          sx={{ mr: "15px", minWidth: "258px" }}
          onClick={() =>
            updateQuiz(quiz.id, (quiz) => {
              quiz.config.results = true;
            })
          }
        >
          Создать результаты
        </Button>
        {isMobile ? (
          <TooltipClickInfo title={"Посмотреть справку"} />
        ) : (
          <Tooltip title="Посмотреть справку" placement="top">
            <Box>
              <Info />
            </Box>
          </Tooltip>
        )}
      </Box>
    </Box>
  );
};
