import { useTheme } from "styled-components";
import { hex2RGB } from "../../utils";
import { useEffect, useRef, useState } from "react";
export const useComputeBackgroundColor = () => {
    const theme = useTheme();
    const containerRef = useRef(null);
    const [backgroundColor, setBackgroundColor] = useState('');
    useEffect(() => {
        containerRef.current &&
            setBackgroundColor(getBackgroundColor(containerRef.current, theme));
    }, [containerRef, theme]);
    return {
        containerRef,
        backgroundColor,
    };
};
export const getBackgroundColor = (element, theme) => {
    if (element.parentElement) {
        const parentElementBackgroundColor = window.getComputedStyle(element.parentElement)['background-color'];
        if (/rgba\([0-9]+, [0-9]+, [0-9]+, 0\)/.test(parentElementBackgroundColor) || !window.getComputedStyle(element.parentElement)['background-color']) {
            return getBackgroundColor(element.parentElement, theme);
        }
        else {
            const rgbArray = hex2RGB(theme.backgroundLevel2);
            if (`rgb(${rgbArray[0]}, ${rgbArray[1]}, ${rgbArray[2]})` ===
                parentElementBackgroundColor) {
                return theme.backgroundLevel3;
            }
        }
    }
    return theme.backgroundLevel2;
};
