import { jsx as _jsx } from "react/jsx-runtime";
import { useEffect, useRef } from "react";
import Styles from "./BucketFill.module.scss";
/**
 * A visual component that changes the background color of child elements as the user progresses through steps.
 * It fills up the background from bottom to top based on a "fillTo" value, creating a progress effect.
 */
export default function BucketFill({ children, background, fillTo, }) {
    const rootRef = useRef(null);
    function resize() {
        const childs = rootRef.current.children;
        const s = rootRef.current.style;
        const elementAtPosition = fillTo === 0 ? null : childs.item(fillTo - 1);
        const elementOffsetAndHeight = elementAtPosition === null
            ? 0
            : elementAtPosition.offsetTop + elementAtPosition.clientHeight;
        const elementRootHeight = rootRef.current.clientHeight;
        const percentToFill = Math.min((elementOffsetAndHeight * 100) / elementRootHeight, 100);
        s.setProperty("--fill-height", `${percentToFill}%`);
        s.setProperty("--empty-height", `${100 - percentToFill}%`);
        s.setProperty("--bg-offset", `${percentToFill === 100 ? -1000 : 100 / ((100 - percentToFill) / 100)}%`);
    }
    useEffect(() => {
        resize();
        window.addEventListener("resize", resize);
        return () => window.removeEventListener("resize", resize);
    }, [fillTo]);
    return (_jsx("div", { ref: rootRef, style: {
            "--bg": background,
        }, className: Styles.root, children: children }));
}
export function IgnoreFill({ children }) {
    return _jsx("div", { className: Styles.ignoreFill, children: children });
}
//# sourceMappingURL=BucketFill.js.map