import TaskIcon from "@/ui_kit/TaskIcon";
import CloseIcon from "@mui/icons-material/Close";
import { Box, Typography } from "@mui/material";
import RunningStripe from "@ui_kit/RunningStripe";

interface Props {
  position: "topleft" | "topright" | "bottomleft" | "bottomright";
  bannerFullWidth: boolean;
  pulsation: boolean;
  rounded: boolean;
  withShadow: boolean;
  buttonFlash: boolean;
  buttonBackgroundColor: string;
  buttonTextColor: string;
  appealText: string;
  quizHeaderText: string;
}

export default function BannerWidgetPreviewDesktop({
  bannerFullWidth,
  buttonBackgroundColor,
  buttonFlash,
  buttonTextColor,
  position,
  pulsation,
  rounded,
  withShadow,
  appealText,
  quizHeaderText,
}: Props) {
  return (
    <Box
      sx={[
        {
          position: "absolute",
          width: "calc(196 / 520 * 100%)",
          height: "calc(30 / 262 * 100%)",
          transitionProperty: "width, height, top, left",
          transitionDuration: "0.5s",
          transitionTimingFunction: "ease",
        },
        position === "topleft" && {
          top: "calc(12.5 / 262 * 100%)",
          left: "calc(50.6 / 520 * 100%)",
        },
        position === "topright" && {
          top: "calc(12.5 / 262 * 100%)",
          left: "calc(190 / 520 * 100%)",
        },
        position === "bottomleft" && {
          top: "calc(178 / 262 * 100%)",
          left: "calc(50.6 / 520 * 100%)",
        },
        position === "bottomright" && {
          top: "calc(178 / 262 * 100%)",
          left: "calc(190 / 520 * 100%)",
        },
        bannerFullWidth &&
          position.startsWith("top") && {
            top: "calc(7 / 262 * 100%)",
            left: "calc(45 / 520 * 100%)",
            width: "calc(348 / 520 * 100%)",
            height: "calc(30 / 262 * 100%)",
          },
        bannerFullWidth &&
          position.startsWith("bottom") && {
            top: "calc(185 / 262 * 100%)",
            left: "calc(45 / 520 * 100%)",
            width: "calc(348 / 520 * 100%)",
            height: "calc(30 / 262 * 100%)",
          },
        pulsation && {
          ":before": {
            content: "''",
            position: "absolute",
            height: "100%",
            width: "100%",
            pointerEvents: "none",
            willChange: "box-shadow",
            borderRadius: "30px",
            animation: "pena-pulsation linear 5s infinite",
            "@keyframes pena-pulsation": {
              "0%": {
                boxShadow: "0 0 0 0 rgba(126, 42, 234, 0.5)",
              },
              "30%": {
                boxShadow: "0 0 0 15px rgba(0, 0, 0, 0)",
              },
              "100%": {
                boxShadow: "0 0 0 0 rgba(0, 0, 0, 0)",
              },
            },
          },
        },
      ]}
    >
      <Box
        sx={{
          width: "100%",
          height: "100%",
          overflow: "hidden",
          display: "flex",
          alignItems: "center",
          backgroundColor: buttonBackgroundColor,
          containerType: "size",
          gap: "calc(5 / 196 * 100%)",
          borderRadius: rounded && !bannerFullWidth ? "30px" : 0,
          boxShadow: withShadow ? "3px 6px 25px 3px rgba(25, 6, 50, 0.4), 0 3px 13px 0 rgba(35, 17, 58, 0.1)" : "none",
        }}
      >
        <TaskIcon
          sx={{
            width: "auto",
            height: "calc(18.57 / 29.5 * 100%)",
            ml: "calc(7.36 / 196 * 100%)",
            aspectRatio: 1,
            color: buttonTextColor,
          }}
        />
        <Box
          sx={{
            display: "flex",
            flexDirection: "column",
            color: buttonTextColor,
          }}
        >
          <Typography
            fontSize="calc(6 / 29.5 * 100cqh)"
            lineHeight="120%"
          >
            {appealText || "Пройти тест"}
          </Typography>
          <Typography
            fontSize="calc(11 / 29.5 * 100cqh)"
            lineHeight="120%"
          >
            {quizHeaderText || "Заголовок теста"}
          </Typography>
        </Box>
        {buttonFlash && <RunningStripe />}
      </Box>
      <CloseIcon
        sx={{
          position: "absolute",
          top: 0,
          right: 0,
          color: "white",
          height: "calc(10 / 29.5 * 100%)",
          width: "auto",
          aspectRatio: 1,
          backgroundColor: rounded || bannerFullWidth ? "#581ca763" : undefined,
          borderRadius: "50%",
        }}
      />
    </Box>
  );
}
