import { Box, Chip, Typography, useTheme, useMediaQuery } from "@mui/material";
import { useNavigate } from "react-router-dom";
import { enqueueSnackbar } from "notistack";

import { quizApi } from "@/api/quiz";
import { setEditQuizId } from "@root/quizes/actions";

import type { Template } from "./Template";

interface QuizTemplateCardProps {
  category: string;
  template: Template;
}

export const QuizTemplateCard = ({
  category,
  template: { quizId, title, picture, categoryDescription },
}: QuizTemplateCardProps) => {
  const navigate = useNavigate();
  const theme = useTheme();
  const isTablet = useMediaQuery(theme.breakpoints.down("md"));

  const copyTemplate = async () => {
    const [copiedQuizId, copyError] = await quizApi.copyTemplate(quizId);

    if (copyError || !copiedQuizId) {
      return enqueueSnackbar(copyError);
    }

    setEditQuizId(copiedQuizId);
    navigate("/edit");
  };

  return (
    <Box
      onClick={copyTemplate}
      sx={{
        cursor: "pointer",
        borderRadius: "12px",
        height: "280px",
        width: isTablet ? "360px" : "auto",
        maxWidth: "360px",
        minWidth: "280px",
        backgroundColor: "white",
        overflow: "hidden",
        boxShadow: `0px 100px 309px rgba(210, 208, 225, 0.24),
                            0px 41.7776px 129.093px rgba(210, 208, 225, 0.172525),
                            0px 22.3363px 69.0192px rgba(210, 208, 225, 0.143066),
                            0px 12.5216px 38.6916px rgba(210, 208, 225, 0.12), 
                            0px 6.6501px 20.5488px rgba(210, 208, 225, 0.0969343), 
                            0px 2.76726px 8.55082px rgba(210, 208, 225, 0.0674749)`,
      }}
    >
      <Box
        id="imghere"
        sx={{
          width: "100%",
          height: "220px",
          background: `url(${picture}) center / 100% auto no-repeat`,
          display: "flex",
          alignItems: "end",
          p: "20px",
        }}
      >
        <Box
          sx={{
            display: "flex",
            flexWrap: "wrap",
            gap: "20px",
          }}
        >
          <Chip
            sx={{
              backgroundColor: theme.palette.brightPurple.main,
              color: "white",
              height: "auto",
              px: "10px",
              py: "2px",
              borderRadius: "8px",
              ...theme.typography.button,
              "& .MuiChip-label": {
                px: 0,
              },
            }}
            label={category}
          />
          {categoryDescription && (
            <Chip
              sx={{
                backgroundColor: theme.palette.brightPurple.main,
                color: "white",
                height: "auto",
                px: "10px",
                py: "2px",
                borderRadius: "8px",
                ...theme.typography.button,
                "& .MuiChip-label": {
                  px: 0,
                },
              }}
              label={categoryDescription}
            />
          )}
        </Box>
      </Box>
      <Box
        sx={{
          display: "flex",
          alignItems: "center",
          justifyContent: "center",
          padding: "0 20px",
          height: "60px",
        }}
      >
        <Typography sx={{ color: "#4D4D4D" }}>{title}</Typography>
      </Box>
    </Box>
  );
};
