import * as React from "react";
import Box, { BoxProps } from "@mui/material/Box";
import Stack from "@mui/material/Stack";
import Typography from "@mui/material/Typography";

import {
  DefaultBucket,
  DangerBucket,
  EmptyBucketIcon,
  RectangleIcon1,
  RectangleIcon2,
  APBucketSkeleton,
  APBucket,
  ClickArrow,
  WarningBucket,
} from "@/components/Sections/Scalable/Icons";
import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
import CircleIcon from "@mui/icons-material/Circle";
import RectangleIcon from "@mui/icons-material/Rectangle";
import WarningIcon from "@mui/icons-material/Warning";
import ArrowBackIcon from "@mui/icons-material/ArrowBack";
import MoreHorizIcon from "@mui/icons-material/MoreHoriz";
import ArrowForwardIcon from "@mui/icons-material/ArrowForward";

export const animationKeyframesProps: BoxProps["sx"] = {
  "@keyframes fall20": {
    "0%": {
      transform: "translateY(0)",
    },
    "100%": {
      transform: "translateY(10px)",
    },
  },

  "@keyframes shrink-and-fall40": {
    "0%": {
      transform: "scale(1) translateY(0)",
      opacity: 1,
    },
    "100%": {
      transform: "scale(0.5) translateY(40px)",
      opacity: 0,
    },
  },

  "@keyframes blink": {
    "0%": {
      opacity: 0,
    },
    "50%": {
      opacity: 1,
    },
    "100%": {
      opacity: 0,
    },
  },

  "@keyframes move2left25andHide": {
    "0%": {
      transform: "translateX(0)",
      opacity: 1,
    },
    "50%": {
      transform: "translateX(-25px)",
      opacity: 0,
    },
    "100%": {
      transform: "translateX(-25px)",
      opacity: 0,
    },
  },

  "@keyframes move2left25andHideReverse": {
    "0%": {
      transform: "translateX(-25px)",
      opacity: 0,
    },
    "50%": {
      transform: "translateX(-25px)",
      opacity: 0,
    },
    "100%": {
      transform: "translateX(0)",
      opacity: 1,
    },
  },

  "@keyframes move2left25andShow": {
    "0%": {
      transform: "translateX(0)",
      opacity: 0,
    },
    "50%": {
      transform: "translateX(0)",
      opacity: 0,
    },
    "100%": {
      transform: "translateX(-25px)",
      opacity: 1,
    },
  },

  "@keyframes move2left25andShowReverse": {
    "0%": {
      transform: "translateX(-25px)",
      opacity: 1,
    },
    "50%": {
      transform: "translateX(0)",
      opacity: 0,
    },
    "100%": {
      transform: "translateX(0)",
      opacity: 0,
    },
  },

  "@keyframes fadeOutIn": {
    "0%": {
      opacity: 0,
    },
    "25%": {
      opacity: 0,
    },
    "50%": {
      opacity: 0,
    },
    "75%": {
      opacity: 0.5,
    },
    "100%": {
      opacity: 1,
    },
  },

  "@keyframes shake": {
    "0%": { transform: "translate(1px, 1px) rotate(0deg)" },
    "10%": { transform: "translate(-1px, -2px) rotate(-1deg)" },
    "20%": { transform: "translate(-3px, 0px) rotate(1deg)" },
    "30%": { transform: "translate(3px, 2px) rotate(0deg)" },
    "40%": { transform: "translate(1px, -1px) rotate(1deg)" },
    "50%": { transform: "translate(-1px, 2px) rotate(-1deg)" },
    "60%": { transform: "translate(-3px, 1px) rotate(0deg)" },
    "70%": { transform: "translate(3px, 1px) rotate(-1deg)" },
    "80%": { transform: "translate(-1px, -1px) rotate(1deg)" },
    "90%": { transform: "translate(1px, 2px) rotate(0deg)" },
    "100%": { transform: "translate(1px, -2px) rotate(-1deg)" },
  },
};

export function DefaultBucketAnimation(props: {
  boxSx?: BoxProps["sx"];
  play?: boolean;
}) {
  const { boxSx, play = false } = props;

  return (
    <Box position="relative" sx={{ display: "flex", ...boxSx }}>
      <DefaultBucket
        sx={{
          color: "transparent",
          width: "24px",
          height: "auto",
        }}
      />
      {play && <GeometryIconsGroup />}
    </Box>
  );
}

export function GeometryIconsGroup() {
  return (
    <Box>
      <ArrowDownwardIcon
        sx={{
          position: "absolute",
          top: "0px",
          left: "13px",
          animation: "fall20 2s infinite",
        }}
      />
      <CircleIcon
        sx={{
          width: "16px",
          height: "16px",
          position: "absolute",
          top: "-32px",
          left: "13px",
          animation: "shrink-and-fall40 2s infinite",
        }}
      />
      <RectangleIcon1
        sx={{
          width: "10px",
          height: "10px",
          position: "absolute",
          top: "-16px",
          left: "13px",
          animation: "shrink-and-fall40 2s infinite",
        }}
      />
      <RectangleIcon2
        sx={{
          width: "10px",
          height: "10px",
          position: "absolute",
          top: "-12px",
          left: "26px",
          animation: "shrink-and-fall40 2s infinite",
        }}
      />
      <CircleIcon
        sx={{
          width: "8px",
          height: "8px",
          position: "absolute",
          top: "-20px",
          left: "30px",
          animation: "shrink-and-fall40 2s infinite",
        }}
      />
      <CircleIcon
        sx={{
          width: "4px",
          height: "4px",
          position: "absolute",
          top: "-10px",
          left: "20px",
          animation: "shrink-and-fall40 2s infinite",
        }}
      />
    </Box>
  );
}

export function DangerBucketAnimation(props: {
  play?: boolean;
  warning?: boolean;
}) {
  const { play = false, warning } = props;

  return (
    <Box position="relative">
      {warning ? (
        <WarningBucket
          sx={{
            color: "transparent",
            width: "24px",
            height: "auto",
          }}
        />
      ) : (
        <DangerBucket
          sx={{
            color: "transparent",
            width: "24px",
            height: "auto",
          }}
        />
      )}
      {play && <GeometryIconsGroup />}
      <WarningIcon
        sx={{
          position: "absolute",
          width: "16px",
          top: "8px",
          left: "4px",
          "& path": {
            fill: "#fff",
          },
          animation: "blink 2s infinite",
        }}
      />
    </Box>
  );
}

export function ResourcePoolExtensionAnimation(props: {
  play?: boolean;
  reverse?: boolean;
  isAP?: boolean;
  infinite?: boolean;
}) {
  const { play = true, reverse, isAP, infinite } = props;

  const ArrowIconMemo = React.useMemo(
    () => (reverse ? ArrowForwardIcon : ArrowBackIcon),
    [reverse]
  );

  const MoveBucketElement = isAP ? APBucketSkeleton : EmptyBucketIcon;
  const TargetBucketElement = isAP ? APBucket : DefaultBucket;

  const duration = infinite ? "2s infinite" : "2s";

  return (
    <Box position="relative" border="1px dashed #000000" px={1} py="8px 0">
      <Typography
        variant="body2"
        component="div"
        textAlign="center"
        gutterBottom
      >
        resource pool
      </Typography>

      <Stack direction="row" gap={1}>
        {play && <Box width="24px" />}
        {/* Only has 3 if play */}
        {play &&
          new Array(3).fill(0).map((item, idx) => {
            if (isAP && idx < 1) {
              return (
                <APBucketSkeleton
                  key={idx}
                  sx={{
                    width: "24px",
                    height: "auto",
                  }}
                />
              );
            }
            return (
              <EmptyBucketIcon
                key={idx}
                sx={{
                  width: "24px",
                  height: "auto",
                }}
              />
            );
          })}
        {/* Only has 4 if not play */}
        {!play &&
          new Array(4).fill(0).map((item, idx) => {
            if (isAP && idx < 2) {
              return (
                <APBucketSkeleton
                  key={idx}
                  sx={{
                    width: "24px",
                    height: "auto",
                  }}
                />
              );
            }
            return (
              <EmptyBucketIcon
                key={idx}
                sx={{
                  width: "24px",
                  height: "auto",
                }}
              />
            );
          })}
      </Stack>

      <Box
        width="100%"
        display="flex"
        alignItems="center"
        justifyContent="center"
      >
        <MoreHorizIcon
          sx={{
            color: "#D9D9D9",
          }}
        />
      </Box>

      {play && (
        <>
          <MoveBucketElement
            sx={{
              width: "24px",
              height: "auto",
              position: "absolute",
              left: "8px",
              bottom: "24px",

              opacity: reverse ? 1 : 0,

              animation: reverse
                ? `move2left25andHideReverse ${duration}`
                : `move2left25andHide ${duration}`,
            }}
          />
          <TargetBucketElement
            sx={{
              color: "transparent",
              width: "24px",
              height: "auto",
              position: "absolute",
              left: "-24px",
              bottom: "24px",

              transform: "translateX(-25px)",
              opacity: reverse ? 0 : 1,

              animation: reverse
                ? `move2left25andShowReverse ${duration}`
                : `move2left25andShow ${duration}`,
            }}
          />

          <ArrowIconMemo
            sx={{
              position: "absolute",
              width: "24px",
              height: "auto",
              left: "-15px",
              bottom: "26px",
              opacity: 1,

              animation: `fadeOutIn ${duration}`,
            }}
          />
        </>
      )}
    </Box>
  );
}

export function ClickArrowAnimation() {
  return (
    <ClickArrow
      sx={{
        position: "absolute",
        width: "48px",
        height: "auto",
        right: "-48px",
        bottom: "-48px",

        animation: "move2center 2s infinite",

        "@keyframes move2center": {
          "0%": {
            transform: "translate(0, 0)",
          },
          "100%": {
            // transform: "translate(-50%, -50%)",
            right: "-12px",
            bottom: "-24px",
          },
        },
      }}
    />
  );
}