import { Children, cloneElement, forwardRef, useEffect, useId, useRef } from "react";
import { useForwardedRef } from "@bedrock-layout/use-forwarded-ref";
import { useTailSpin } from "../../../utils/index.js";
const passThroughCss = `pointer-events: none;
touch-action: none;`;
const CoveringLoader = forwardRef(({ show, children, color, size, speed, mode = "over", inertMode = "block-interaction", }, ref) => {
    const spinnerBg = useTailSpin({ size, color, speed });
    const innerRef = useForwardedRef(ref);
    const id = "miui-" + useId().replace(/:/gu, "-");
    const stylesheet = useRef();
    useEffect(() => {
        const styleEl = document.createElement("style");
        document.head.appendChild(styleEl);
        stylesheet.current = styleEl;
        return () => {
            var _a;
            (_a = stylesheet.current) === null || _a === void 0 ? void 0 : _a.remove();
        };
    }, []);
    const effect = () => {
        const current = innerRef.current;
        if (current !== null && !(current instanceof HTMLElement)) {
            throw new Error("CoveringLoader child ref is not an HTMLElement, got: (" + typeof current + ") " + String(current));
        }
        if (!current || !show) {
            return;
        }
        let extraLoaderElem = null;
        if (mode === "over") {
            const prnt = current.parentElement;
            extraLoaderElem = document.createElement("div");
            extraLoaderElem.classList.add(id);
            if (prnt) {
                prnt.classList.add("parent-" + id);
                prnt.appendChild(extraLoaderElem);
                if (inertMode === "block-interaction") {
                    prnt.inert = true;
                }
            }
        }
        else {
            current.classList.add(id);
            if (inertMode === "block-interaction") {
                current.inert = true;
            }
        }
        const inertCss = inertMode === "pass-through" ? passThroughCss : "";
        const backgroundCss = mode !== "over"
            ? "background-color: rgba(255, 255, 255, 0.5); mix-blend-mode: luminosity;"
            : "";
        const spinnerCss = `z-index: 1;
content: "";
position: absolute;
inset: 0;
background: url('${spinnerBg}') no-repeat center center;
${backgroundCss}
${inertCss}`;
        const parentCss = "position: relative;";
        if (mode !== "over") {
            stylesheet.current.textContent = `
.${id}::${mode} {
    ${spinnerCss}
}
.${id} {
    ${parentCss}
}`;
        }
        else {
            stylesheet.current.textContent = `
.${id} {
    ${spinnerCss}
}
.parent-${id} {
    ${parentCss}
}
.parent-${id} > *:not(:last-child) {
    opacity: 0.5
}`;
        }
        return () => {
            stylesheet.current.textContent = "";
            if (mode === "over") {
                const prnt = current.parentElement;
                extraLoaderElem === null || extraLoaderElem === void 0 ? void 0 : extraLoaderElem.remove();
                if (prnt) {
                    prnt.classList.add("parent-" + id);
                    if (inertMode === "block-interaction") {
                        prnt.inert = false;
                    }
                }
            }
            else {
                current.classList.remove(id);
                if (inertMode === "block-interaction") {
                    current.inert = false;
                }
            }
        };
    };
    useEffect(effect, [innerRef.current, spinnerBg, show, color, size, speed, mode, inertMode, id]);
    return cloneElement(Children.only(children), {
        ref: innerRef,
    });
});
CoveringLoader.displayName = "CoveringLoader";
export { CoveringLoader };
//# sourceMappingURL=CoveringLoader.js.map