Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
const require_chunk = require("../chunk-BN4qSVkS.cjs");
const require_styles_colors = require("../styles/colors.cjs");
const require_styles_themes = require("../styles/themes.cjs");
const require_styles_common = require("../styles/common.cjs");
const require_components_Icon_Icon = require("./Icon/Icon.cjs");
const require_styles_utils = require("../styles/utils.cjs");
const require_utils_toReactNodes_toReactNodes = require("../utils/toReactNodes/toReactNodes.cjs");
const require_utils_toReactNodes_setReactNodesTypography = require("../utils/toReactNodes/setReactNodesTypography.cjs");
const require_styles_z_index = require("../styles/z-index.cjs");
const require_components_UnstyledButton = require("./UnstyledButton.cjs");
let _emotion_styled = require("@emotion/styled");
_emotion_styled = require_chunk.__toESM(_emotion_styled);
let lodash_es = require("lodash-es");
let react = require("react");
let _emotion_react_jsx_runtime = require("@emotion/react/jsx-runtime");
let react_dom = require("react-dom");
react_dom = require_chunk.__toESM(react_dom);
//#region src/components/Toasts.tsx
const firstDur = .3;
function Toasts({ queue, onHide, fromTop = 29, stackDir = "above", maxVisible = 3, removeExpiredAndNotVisible = true, dedupeConsecutive = true, typography: typographyProp, onClickContentNode }) {
	const queuedToastIds = (0, react.useRef)(/* @__PURE__ */ new Set());
	const prevToastQueue = (0, react.useRef)([]);
	const [toastQueue, setToastQueue] = (0, react.useState)([]);
	const autoHideTimeoutRef = (0, react.useRef)(null);
	const hidingTimeoutRefs = (0, react.useRef)({});
	const nodeRef = (0, react.useRef)(null);
	const [nodeReady, setNodeReady] = (0, react.useState)(false);
	const defaultTypography = {
		type: typographyProp?.type || "Body",
		size: typographyProp?.size || "ExtraSmall",
		color: typographyProp?.color || "white"
	};
	const hideToast = (0, react.useCallback)((id) => {
		setToastQueue((currentToastQueue) => {
			const hideToastIndex = currentToastQueue.findIndex((t) => t.id === id);
			return currentToastQueue.map((toast, i) => {
				if (i === hideToastIndex) return {
					...toast,
					isActive: false,
					isHiding: true
				};
				return toast;
			});
		});
		const hidingTimeoutRef = hidingTimeoutRefs.current[id];
		if (hidingTimeoutRef) clearTimeout(hidingTimeoutRef);
		hidingTimeoutRefs.current[id] = setTimeout(() => {
			setToastQueue((currentToastQueue) => {
				const newToastQueue = currentToastQueue.filter((t) => t.id !== id);
				setTimeout(() => onHide(id), 0);
				hidingTimeoutRefs.current[id] = null;
				return newToastQueue;
			});
		}, firstDur * 1e3);
		if (autoHideTimeoutRef.current) {
			clearTimeout(autoHideTimeoutRef.current);
			autoHideTimeoutRef.current = null;
		}
	}, [onHide, setToastQueue]);
	(0, react.useEffect)(() => {
		const newToastQueueArgs = queue.reduce((acc, toast) => {
			if (toast.expires < Date.now()) {
				onHide(toast.id);
				return acc;
			}
			if (!queuedToastIds.current.has(toast.id)) return [...acc, toast];
			return acc;
		}, []);
		if (newToastQueueArgs.length) {
			const newToasts = newToastQueueArgs.reduce((acc, toast) => {
				if (dedupeConsecutive && acc.length) {
					const lastToast = acc[acc.length - 1];
					if ((0, lodash_es.isEqual)(toast.content, lastToast.content)) return acc;
				}
				queuedToastIds.current.add(toast.id);
				return [...acc, {
					...toast,
					isActive: true,
					isHiding: false
				}];
			}, []);
			setToastQueue((currentToastQueue) => {
				const currentToast = currentToastQueue[currentToastQueue.length - 1];
				if (dedupeConsecutive && currentToast && (0, lodash_es.isEqual)(newToasts[0].content, currentToast.content)) return currentToastQueue;
				return [...currentToastQueue, ...newToasts];
			});
		}
	}, [
		queue,
		hideToast,
		onHide,
		dedupeConsecutive
	]);
	(0, react.useEffect)(() => {
		if (prevToastQueue.current.length !== toastQueue.length) {
			const currentToast = toastQueue[toastQueue.length - 1];
			if (currentToast && !currentToast.isHiding) {
				if (autoHideTimeoutRef.current) {
					clearTimeout(autoHideTimeoutRef.current);
					autoHideTimeoutRef.current = null;
				}
				if (currentToast.duration) autoHideTimeoutRef.current = setTimeout(() => {
					hideToast(currentToast.id);
				}, currentToast.duration);
			}
			prevToastQueue.current = toastQueue;
		}
	}, [
		toastQueue,
		hideToast,
		onHide
	]);
	(0, react.useEffect)(() => {
		if (!nodeRef.current) {
			nodeRef.current = document.createElement("div");
			document.body.appendChild(nodeRef.current);
		}
		setNodeReady(true);
		return () => {
			if (nodeRef.current) {
				document.body.removeChild(nodeRef.current);
				nodeRef.current = null;
			}
		};
	}, []);
	const currentToastIndex = toastQueue.length - 1;
	(0, react.useEffect)(() => {
		if (removeExpiredAndNotVisible) setToastQueue((currentToastQueue) => {
			return currentToastQueue.filter((toast, i) => {
				const fromCurrent = i === currentToastIndex ? 0 : currentToastIndex - i;
				return toast.expires > Date.now() || fromCurrent < maxVisible;
			});
		});
	}, [
		currentToastIndex,
		maxVisible,
		removeExpiredAndNotVisible
	]);
	const currentToast = toastQueue[currentToastIndex];
	return nodeReady ? toastQueue.map((toast, i) => {
		if (!nodeRef.current) return null;
		const fromCurrent = i === currentToastIndex ? 0 : currentToastIndex - i;
		const movingToCurrent = currentToast.isHiding && i === currentToastIndex - 1;
		const hidingFromCurrent = currentToast.isHiding ? fromCurrent - 1 : fromCurrent;
		const nodes = toast.content ? require_utils_toReactNodes_setReactNodesTypography.setDefaultReactNodesTypography(toast.content, { default: defaultTypography }).map((node) => {
			if ((0, lodash_es.isObject)(node) && "typography" in node && node.typography) {
				const existingOnClick = node.typography.onClick;
				if (existingOnClick || onClickContentNode) node.typography.onClick = (e) => {
					if (existingOnClick) existingOnClick(e);
					if (onClickContentNode) onClickContentNode(node, toast.id);
				};
			}
			return node;
		}) : null;
		const contentNode = /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)("span", { children: nodes ? require_utils_toReactNodes_toReactNodes.toReactNodes(nodes) : null });
		return /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(react.Fragment, { children: react_dom.default.createPortal(/* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsxs)(StyledToast, {
			backgroundColor: toast.type === "error" ? require_styles_colors.colors.red50 : toast.type === "success" ? require_styles_colors.colors.green37 : toast.type === "black" ? require_styles_colors.colors.black : void 0,
			isActive: toast.isActive,
			isHiding: toast.isHiding,
			isVisible: fromCurrent < maxVisible,
			duration: toast.duration,
			fromTop: Math.floor(fromTop),
			isCurrent: i === currentToastIndex,
			fromCurrent: hidingFromCurrent,
			currentToastHiding: currentToast.isHiding,
			maxVisible,
			activeCount: Math.min(toastQueue.length - (currentToast.isHiding ? 1 : 0), maxVisible),
			stackDir: stackDir === "above" ? -1 : 1,
			movingToCurrent,
			children: [contentNode, /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_UnstyledButton.UnstyledButton, {
				css: require_styles_utils.extend(require_styles_utils.flexCenter, {
					position: "absolute",
					right: "5px",
					top: "-1px",
					height: "50px",
					width: "50px",
					outlineColor: `${require_styles_colors.colors.white} !important`
				}),
				onClick: () => hideToast(toast.id),
				children: /* @__PURE__ */ (0, _emotion_react_jsx_runtime.jsx)(require_components_Icon_Icon.Icon, {
					name: "Close",
					width: 9
				})
			})]
		}), nodeRef.current) }, toast.id);
	}) : null;
}
const width = 400;
const beginTopPx = -100;
const beginHeightPx = 50;
const minScale = .95;
const StyledToast = _emotion_styled.default.div`
  position: fixed;
  z-index: ${require_styles_z_index.z.toast};
  line-height: ${require_styles_utils.pxToRems(16)};
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  font-weight: 500;
  background-color: ${({ isCurrent, movingToCurrent, backgroundColor }) => isCurrent || movingToCurrent ? backgroundColor ?? require_styles_colors.colors.blue43 : backgroundColor ?? require_styles_themes.themeOr("#2A50B2", require_styles_colors.colors.blue43)};
  color: rgba(255, 255, 255, 0);
  padding: 16px 24px;
  ${({ duration }) => !duration && "padding-right: 50px;"}
  ${({ isVisible, isCurrent, movingToCurrent, stackDir }) => {
	if (!isVisible) return "";
	const sharpOverlayShadow = `0 ${1 * stackDir}px 0px 0px rgba(0, 0, 0, 0.5)`;
	return isCurrent || movingToCurrent ? `box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.1), 0 4px 8px 0 rgba(0, 0, 0, 0.08), ${sharpOverlayShadow};` : `box-shadow: ${sharpOverlayShadow};`;
}}
  left: 50%;
  transform: translateX(-50%);
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: calc(100% - ${require_styles_common.standardContentInset.smPx * 2}px);

  max-height: ${beginHeightPx}px;
  width: 0px;
  border-radius: 3rem;
  transition:
    width 0.25s ${firstDur}s cubic-bezier(0.41, 0.52, 0.38, 1.33),
    border-radius 0.1s ${firstDur}s linear,
    color 0.1s ${firstDur * 2.1}s linear,
    opacity 0.1s linear,
    transform 0.25s cubic-bezier(0.41, 0.52, 0.38, 1.33),
    background-color 0.3s linear,
    max-height 0.2s 0.5s linear;
  top: ${beginTopPx}px;

  a {
    text-decoration: underline;
  }

  button {
    opacity: ${({ duration }) => duration ? "0" : "1"};
    transition: opacity 0.1s linear;
  }
  &:hover {
    ${({ duration }) => duration ? "button { opacity: 1; }" : ""}
  }

  ${({ isVisible, fromCurrent, movingToCurrent, activeCount, stackDir, maxVisible, currentToastHiding }) => {
	if (fromCurrent && !movingToCurrent) {
		if (!isVisible) fromCurrent = maxVisible - 1;
		return `transform: translateX(-50%) translateY(${stackDir * 7 * Math.pow(fromCurrent, .75)}px) scale(${Math.max(1 - (1 - minScale) / activeCount * fromCurrent, 0)});`;
	}
	return "";
}}

  ${({ fromTop }) => `
    /* Animations with different values still interfere with each other if they have the same name.
       Append the variable value to get a unique name for each animation: */
    @keyframes slideOut-${fromTop} {
      0% {
        top: ${fromTop}px;
      }
      100% {
        top: ${beginTopPx}px;
      }
    }

    @keyframes slideIn-${fromTop} {
      0% {
        top: ${beginTopPx}px;
      }
      100% {
        top: ${fromTop}px;
      }
    }
  `}

  &:before {
    ${({ duration }) => duration ? "content: \"\";" : ""}
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0%;
    background-color: rgba(0, 0, 0, 0.1);
    z-index: -1;
    // switch back to minimal state instantly so it's ready for the next notification:
  }

  ${({ duration }) => duration ? `
        @keyframes progressBar-${duration} {
          0% {
            width: 0%;
          }
          100% {
            width: 100%;
          }
        }
      ` : ""}

  ${({ isActive, duration, isHiding, fromTop, isCurrent }) => isActive ? `
      width: ${width}px;
      top: ${fromTop}px;
      border-radius: 1.3rem;
      animation: ${firstDur}s cubic-bezier(.25,.15,.59,1.28) 0s slideIn-${fromTop};
      color: rgba(255, 255, 255, 1);
      max-height: 100px;
      &:before {
        ${isCurrent && duration ? `animation: progressBar-${duration} ${duration / 1e3}s linear;` : ""};
      }
      ` : `
      ${isHiding ? `
          animation: ${firstDur}s cubic-bezier(.57,-0.43,.78,.81) 0s slideOut-${fromTop};
          &:before {
            width: 100%;
          }
          ` : ""}
      top: ${beginTopPx}px;
    `}
`;
//#endregion
exports.Toasts = Toasts;
