import { getLineHeightForTypographyType } from "../styles/tokens/typography.js";
import { themeOrWithKey, themes } from "../styles/themes.js";
import { toReactNodes } from "../utils/toReactNodes/toReactNodes.js";
import { setDefaultReactNodesTypography } from "../utils/toReactNodes/setReactNodesTypography.js";
import styled from "@emotion/styled";
import { Fragment } from "react";
import { ThemeProvider, css, keyframes } from "@emotion/react";
import { jsx, jsxs } from "@emotion/react/jsx-runtime";
//#region src/components/PendingValue.tsx
const bgPosition = keyframes`
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
`;
function PendingValue({ animate = true, content: contentProp, typography: typographyProp, width, forceTheme, fullSizePending = false }) {
	const defaultTypography = {
		type: typographyProp?.type || "Body",
		size: typographyProp?.size || "Small",
		color: typographyProp?.color || "text",
		hideOverflow: true
	};
	const content = toReactNodes(setDefaultReactNodesTypography(contentProp, {
		link: defaultTypography,
		text: defaultTypography,
		nextLink: defaultTypography,
		currencyAmount: defaultTypography,
		clipboardTextField: defaultTypography
	}));
	const contentNode = /* @__PURE__ */ jsx(StyledPendingValueContent, {
		typographyType: defaultTypography.type,
		typographySize: defaultTypography.size,
		children: content
	});
	const nodes = /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs(StyledPendingValueBgOuter, {
		typographyType: defaultTypography.type,
		typographySize: defaultTypography.size,
		widthProp: width,
		hasContent: !!contentProp,
		fullSizePending,
		children: [/* @__PURE__ */ jsx(StyledPendingValueBg, {
			visible: !contentProp,
			fullSizePending,
			animate
		}), fullSizePending ? null : contentNode]
	}), fullSizePending ? contentNode : null] });
	return forceTheme ? /* @__PURE__ */ jsx(ThemeProvider, {
		theme: themes[forceTheme],
		children: nodes
	}) : nodes;
}
const StyledPendingValueBgOuter = styled.div`
  position: relative;
  height: ${({ typographyType, typographySize, theme }) => getLineHeightForTypographyType(typographyType, typographySize, theme)};

  ${({ widthProp, hasContent }) => widthProp && !hasContent ? `width: ${widthProp}px;` : "width: 100%;"}
  overflow: hidden;
  max-width: 100%;

  ${({ fullSizePending }) => {
	if (fullSizePending) return `
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        height: 100%;
        width: 100%;
      `;
	return "";
}}
`;
const StyledPendingValueContent = styled.div`
  position: relative;
  z-index: 1;
  overflow: hidden;

  height: ${({ typographyType, typographySize, theme }) => getLineHeightForTypographyType(typographyType, typographySize, theme)};
`;
const vSpacing = 2;
const StyledPendingValueBg = styled.div`
  z-index: 0;
  width: 100%;
  position: absolute;

  ${({ fullSizePending }) => {
	if (fullSizePending) return `
        height: 100%;
        top: 0;
      `;
	return `
      height: calc(100% - ${vSpacing * 2}px);
      top: ${vSpacing}px;
      border-radius: 999px;
    `;
}}

  ${({ visible }) => visible ? "opacity: 1;" : "opacity: 0;"}

  background: linear-gradient(
    90deg,
    ${themeOrWithKey("c05Neutral", "c25Neutral")} 0%,
    ${themeOrWithKey("c1Neutral", "c3Neutral")} 50%,
    ${themeOrWithKey("c05Neutral", "c25Neutral")} 100%
  );

  background-size: 200% 100%;
  background-position: 0% 0%;

  @keyframes rotate {
    0% {
      transform: rotate(0deg);
    }
    100% {
      transform: rotate(360deg);
    }
  }

  ${({ animate }) => {
	return animate ? css`
          animation: ${bgPosition} 2s linear infinite;
        ` : "";
}}
`;
//#endregion
export { PendingValue, StyledPendingValueBg, StyledPendingValueContent };
