import { t as uuid } from "../../uuid.js";
import { c as ZIndex, n as AnalyticsId } from "../../constants2.js";
import classNames from "classnames";
import { useCallback, useRef, useState } from "react";
import { jsx, jsxs } from "react/jsx-runtime";
import loaderStyles from "./styles.module.scss";
let Overlay = /* @__PURE__ */ function(Overlay$1) {
	Overlay$1["screen"] = "screen";
	Overlay$1["parent"] = "parent";
	return Overlay$1;
}({});
var Loader = (props) => {
	const { overlay, size = "small", className = "", labelId = uuid(), testId, center, inline, ariaLabelledById, ariaLabel = "Laster inn" } = props;
	const color = props.overlay ? "white" : props.color || "neutral";
	const showLoader = () => {
		if (overlay === Overlay.parent || inline) return false;
		return true;
	};
	const [display, setDisplay] = useState(showLoader());
	const hasInitializedRef = useRef(false);
	const isSmall = size === "small";
	const isMedium = size === "medium";
	const isLarge = size === "large";
	const loaderWrapperClasses = classNames({
		[loaderStyles["loader-wrapper--center"]]: center,
		[loaderStyles["loader-wrapper--overlay"]]: overlay,
		[loaderStyles["loader-wrapper--overlay-screen"]]: overlay === Overlay.screen,
		[loaderStyles["loader-wrapper--overlay-parent"]]: overlay === Overlay.parent && display,
		[loaderStyles["loader-wrapper--inline"]]: inline && display
	});
	const loaderClasses = classNames(loaderStyles.loader, {
		[loaderStyles["loader--small"]]: isSmall,
		[loaderStyles["loader--medium"]]: isMedium,
		[loaderStyles["loader--large"]]: isLarge
	}, className);
	const loaderDotClasses = classNames(loaderStyles.loader__dot, {
		[loaderStyles["loader__dot--small"]]: isSmall,
		[loaderStyles["loader__dot--medium"]]: isMedium,
		[loaderStyles["loader__dot--large"]]: isLarge,
		[loaderStyles["loader__dot--banana"]]: color === "banana",
		[loaderStyles["loader__dot--cherry"]]: color === "cherry",
		[loaderStyles["loader__dot--kiwi"]]: color === "kiwi",
		[loaderStyles["loader__dot--neutral"]]: color === "neutral",
		[loaderStyles["loader__dot--plum"]]: color === "plum",
		[loaderStyles["loader__dot--black"]]: color === "black",
		[loaderStyles["loader__dot--white"]]: color === "white"
	});
	return /* @__PURE__ */ jsx("div", {
		className: loaderWrapperClasses,
		ref: useCallback((node) => {
			if (node && !hasInitializedRef.current) {
				hasInitializedRef.current = true;
				if (overlay === Overlay.parent && node.parentElement?.style) {
					node.parentElement.style.position = "relative";
					setDisplay(true);
				}
				if (inline && node.parentElement?.style) {
					node.parentElement.style.display = "flex";
					setDisplay(true);
				}
			}
		}, [overlay, inline]),
		style: overlay === Overlay.screen ? { zIndex: ZIndex.OverlayScreen } : {},
		children: display && /* @__PURE__ */ jsxs("div", {
			"data-testid": testId,
			"data-analyticsid": AnalyticsId.Loader,
			role: "progressbar",
			"aria-labelledby": ariaLabelledById || labelId,
			className: loaderClasses,
			children: [
				/* @__PURE__ */ jsx("div", { className: loaderDotClasses }),
				/* @__PURE__ */ jsx("div", { className: loaderDotClasses }),
				/* @__PURE__ */ jsx("div", { className: loaderDotClasses }),
				/* @__PURE__ */ jsx("div", { className: loaderDotClasses }),
				!ariaLabelledById && /* @__PURE__ */ jsx("span", {
					id: labelId,
					className: loaderStyles["loader__hidden-text"],
					children: ariaLabel
				})
			]
		})
	});
};
var Loader_default = Loader;
export { Overlay, Loader_default as default };

//# sourceMappingURL=index.js.map