import { forwardRef } from "react";
import { Box } from "../box";
import { styled, keyframes } from "../../theme";
import { pxToRem } from "../../utils";

import type { WithTestId } from "../../types";

const gradientAnimation = keyframes({
  "0%": { opacity: 1 },
  "50%": { opacity: 0.7 },
  "100%": { opacity: 1 },
});

const progressiveAnimation = keyframes({
  "100%": { transform: "translateX(100%)" },
});

const StyledLoadingBox = styled(Box, {
  backgroundColor: "$off-white-9",
  width: "100%",
  height: pxToRem(54),
  borderRadius: "$xs",
  variants: {
    variant: {
      blink: {
        animation: `${gradientAnimation} 1s infinite ease-in-out`,
      },
      progressive: {
        position: "relative",
        overflow: "hidden",
        "&::after": {
          content: "",
          height: "100%",
          width: "100%",
          position: "absolute",
          top: 0,
          left: 0,
          transform: "translateX(-100%)",
          background: "linear-gradient(90deg, #FFF8F800 25%, $off-white-9 50%, #FFF8F800 75%)",
          animation: `${progressiveAnimation} 3s infinite linear`,
        },
      },
    },
  },
});

type LoadingBoxProps = WithTestId<React.ComponentProps<typeof StyledLoadingBox>>;

export const LoadingBox = forwardRef<HTMLDivElement, LoadingBoxProps>((props, ref) => {
  const { variant = "blink", ...rest } = props;

  return <StyledLoadingBox variant={variant} ref={ref} {...rest} />;
});

LoadingBox.displayName = "LoadingBox";