let adoptedStyle: CSSStyleSheet;

export const updateIntrinsicSize = (element: HTMLElement, attribute: "width" | "height") => {

    const size = element.getAttribute(attribute);

    if (!size) {
        return;
    }

    if (!adoptedStyle) {
        adoptedStyle = new CSSStyleSheet();
        document.adoptedStyleSheets = [ ... document.adoptedStyleSheets, adoptedStyle];
    }

    const { tagName } = element;

    const key = `${tagName}[${attribute}=${size}px]`;
    if (adoptedStyle[key]) {
        return;
    }

    adoptedStyle[key] = true;

    const value = /^\d+$/.test(size) ? size + "px" : size;

    adoptedStyle.insertRule(`${tagName}:not([styler-${attribute}])[${attribute}=${ CSS.escape(size)}] { ${attribute}: ${value}; }`);
    adoptedStyle.insertRule(`@media (min-width: 701px) ${tagName}:not([styler-tablet-${attribute}])[${attribute}=${ CSS.escape(size)}] { ${attribute}: ${value}; }`);
    adoptedStyle.insertRule(`@media (min-width: 901px) ${tagName}:not([styler-desktop-${attribute}])[${attribute}=${ CSS.escape(size)}] { ${attribute}: ${value}; }`);

};

export const addAdoptedStyleRule = (element: HTMLElement, selector, rule) => {
    if (!selector) {
        return;
    }    
    if (!rule) {
        return;
    }

    if (!adoptedStyle) {
        adoptedStyle = new CSSStyleSheet();
        document.adoptedStyleSheets = [ ... document.adoptedStyleSheets, adoptedStyle];
    }

    const { tagName } = element;

    const key = `${tagName}${selector} {
        ${rule}
    }
`;
    if (adoptedStyle[key]) {
        return;
    }

    adoptedStyle[key] = true;
    adoptedStyle.insertRule(key);
}