'use strict';

class CSSVarsUtils {
  static applyCSSVars(document, host, child) {
    const isSameDomain = (styleSheet) => {
      if (!styleSheet.href) {
        return true;
      }
      return styleSheet.href.indexOf(window.location.origin) === 0;
    };
    Array.from(document.styleSheets).filter(isSameDomain).forEach((sheet) => {
      Array.from(sheet.cssRules).filter(rule => rule instanceof CSSStyleRule).forEach((rule) => {
        Array.from(rule.style).forEach((propName) => {
          if (propName.startsWith("--")) {
            CSSVarsUtils.applyIfExists(host, child, propName);
          }
        });
      });
    });
  }
  static applyVarsTextInput(host, child) {
    if (child) {
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--background-color');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--border-color');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input--height');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--disabled--background-color');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--disabled--color');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input--height--slim');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input--border-radius');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--focus--border-color');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__icon--width');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__input--focus--icon-color');
      CSSVarsUtils.applyIfExists(host, child, '--ez-text-input__margin-bottom');
    }
  }
  static applyVarsButton(host, child) {
    if (child) {
      ["--ez-button--min-width",
        "--ez-button--height",
        "--ez-button__icon--width",
        "--ez-button__inline__icon--padding",
        "--ez-button--padding-top",
        "--ez-button--padding-bottom",
        "--ez-button--padding-right",
        "--ez-button--padding-left",
        "--ez-button--color",
        "--ez-button--font-size",
        "--ez-button--font-family",
        "--ez-button--font-weight",
        "--ez-button--background-color",
        "--ez-button--border-radius",
        "--ez-button--border",
        "--ez-button--hover-color",
        "--ez-button--hover--background-color",
        "--ez-button--disabled-color",
        "--ez-button--disabled--background-color",
        "--ez-button--focus--border",
        "--ez-button--focus--box-shadow",
        "--ez-button--active-color",
        "--ez-button--active--background-color",
        "--ez-button--link-color",
        "--ez-button--link--hover-color",
        "--ez-button--link--small--font-size",
        "--ez-button--link--medium--font-size",
        "--ez-button--link--large--font-size",].forEach(prop => {
        CSSVarsUtils.applyIfExists(host, child, prop);
      });
    }
  }
  static applyVarsGrid(host, child) {
    if (child) {
      [
        "--ez-grid--min-height",
        "--snk-grid-min-height",
      ].forEach(prop => {
        const propValue = getComputedStyle(host).getPropertyValue(prop);
        if (propValue !== null && propValue !== undefined) {
          child.style.setProperty(prop, propValue);
        }
      });
    }
  }
  static applyIfExists(host, element, varName) {
    const prop = getComputedStyle(host).getPropertyValue(varName);
    if (prop) {
      element.style.setProperty(varName, prop);
    }
  }
}

exports.CSSVarsUtils = CSSVarsUtils;
