"use client";
import { jsxs, jsx } from "../../packages/jsx/src/jsx-runtime.js";
import { keyframes } from "@emotion/react";
import { useRef } from "react";
import { useIsomorphicLayoutEffect } from "../../hooks/useIsomorphicLayoutEffect.js";
import { BorderRadius } from "../../tokens/BorderRadius.js";
const GRADIENT_SIZE = 4e3;
const skeletonShimmerAnimation = keyframes`
  0% { transform: translateY(0); }
  100% { transform: translateY(${GRADIENT_SIZE}px); }
`;
const skeletonStyles = {
  overflow: "hidden",
  backgroundColor: "White4"
};
const ANIMATION_DURATION_MS = 7e3;
const skeletonBackgroundDivStyles = {
  content: '""',
  position: "absolute",
  width: "100%",
  height: `${GRADIENT_SIZE}px`,
  backgroundImage: skeletonBackgroundGradient,
  backgroundRepeat: "repeat",
  backgroundSize: `${GRADIENT_SIZE}px ${GRADIENT_SIZE}px`,
  backgroundPositionX: "var(--bg-start-pos-x)",
  backgroundPositionY: "var(--bg-start-pos-y)",
  opacity: 0.9,
  animation: `${skeletonShimmerAnimation} ${ANIMATION_DURATION_MS}ms infinite linear var(--animation-play-state)`,
  "@media (prefers-reduced-motion)": {
    animation: "none"
  }
};
const Skeleton = ({ borderRadius = "S", width = "100%", height, ...rest }) => {
  const ref = useRef(null);
  useIsomorphicLayoutEffect(() => {
    const div = ref.current;
    if (!div) return;
    const { x, y } = div.getBoundingClientRect();
    div.style.setProperty("--bg-start-pos-x", `${GRADIENT_SIZE * 3 / 4 - x}px`);
    div.style.setProperty("--bg-start-pos-y", `${-y % GRADIENT_SIZE}px`);
    div.style.setProperty("--animation-play-state", "running");
  }, []);
  return /* @__PURE__ */ jsxs(
    "div",
    {
      ref,
      sx: {
        ...skeletonStyles,
        borderRadius: BorderRadius[borderRadius],
        height,
        width
      },
      style: { "--bg-start-pos-x": 0, "--bg-start-pos-y": 0, "--animation-play-state": "paused" },
      ...rest,
      children: [
        /* @__PURE__ */ jsx("div", { sx: skeletonBackgroundDivStyles, style: { bottom: "0" } }),
        /* @__PURE__ */ jsx("div", { sx: skeletonBackgroundDivStyles, style: { bottom: GRADIENT_SIZE } })
      ]
    }
  );
};
function skeletonBackgroundGradient(theme) {
  const { Purple2, Midnight4, White16 } = theme.colors;
  return [
    `linear-gradient(-1deg, transparent 15%, ${Purple2} 48%, transparent 85%)`,
    `linear-gradient(-5deg, transparent 15%, ${White16} 47%, transparent 75%)`,
    `linear-gradient(-8deg, transparent 25%, ${Midnight4} 52%, transparent 75%)`
  ].join(", ");
}
export {
  ANIMATION_DURATION_MS,
  GRADIENT_SIZE,
  Skeleton,
  skeletonBackgroundGradient
};
