var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
  var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
  else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
import { VegaSlimmer, MapToComponentField, MapToComponentMethod } from 'vega-slimmer/core';
import { formatAndValidStateToken } from '../../../../utils/design-token';
import { vegaNonceManager } from '../../../../helpers/csp/vega-nonce-manager';
import { htmlSanitizer, styleSanitizeStrategy } from '../../../../utils/sanitize';
/**
 * VegaBoxStateStylesController
 */
export class VegaBoxStateStylesController extends VegaSlimmer {
  /**
   * componentWillLoad, while component will load should append state style to shadowroot
   */
  componentWillLoad() {
    this.appendAllStateStyles();
  }
  /**
   * The function `watchBorder` in TypeScript appends state styles for the border.
   */
  watchBorder() {
    this.appendStateStyles(this.border, 'border');
    this.makeBorderColorAfterBorder();
  }
  /**
   * The function `watchShadow` in TypeScript appends state styles for the shadow.
   */
  watchShadow() {
    this.appendStateStyles(this.shadow, 'shadow');
  }
  /**
   * The function `watchBorderColor` in TypeScript appends state styles for the border color.
   */
  watchBorderColor() {
    this.appendStateStyles(this.borderColor, 'borderColor');
    this.makeBorderColorAfterBorder();
  }
  /**
   * The function `watchBackgroundColor` in TypeScript appends state styles for the background color.
   */
  watchBackgroundColor() {
    this.appendStateStyles(this.backgroundColor, 'backgroundColor');
  }
  /**
   * The function `appendStateStyles` appends CSS styles for a specific state variant to the shadow root
   * of a host element.
   *
   * @param {StateVariantType} token - The `token` parameter in the `appendStateStyles` function is a StateVariantType that
   * represents the styles associated with a specific state of a component. It is used to define the CSS
   * styles that should be applied when the component is in that particular state.
   * @param {keyof ManagedStateScopeInput} flag - The `flag` parameter in the `appendStateStyles` function is used to specify the
   * key of the ManagedStateScopeInput object for which the state styles are being appended.
   */
  appendStateStyles(token, flag) {
    var _a;
    (_a = this.host.shadowRoot.querySelector(`style#state-styles-${flag}`)) === null || _a === void 0 ? void 0 : _a.remove();
    const styles = formatAndValidStateToken(token, flag);
    if (styles) {
      // eslint-disable-next-line no-restricted-globals
      const styleElement = document.createElement('style');
      styleElement.setAttribute('id', `state-styles-${flag}`);
      if (vegaNonceManager.nonce) {
        styleElement.setAttribute('nonce', vegaNonceManager.nonce);
      }
      styleElement.innerHTML = htmlSanitizer.sanitize(formatAndValidStateToken(token, flag), styleSanitizeStrategy);
      this.host.shadowRoot.append(styleElement);
    }
  }
  /**
   * When both border color and border are set,
   * we need to ensure that the border color is placed after the border so that the border color can take effect.
   */
  makeBorderColorAfterBorder() {
    const borderColor = this.host.shadowRoot.querySelector(`style#state-styles-borderColor`);
    const border = this.host.shadowRoot.querySelector(`style#state-styles-border`);
    if (borderColor && border) {
      border.after(borderColor);
    }
  }
  /**
   * The function `appendAllStateStyles` appends styles for background color, border color, border, and
   * shadow.
   */
  appendAllStateStyles() {
    this.appendStateStyles(this.backgroundColor, 'backgroundColor');
    this.appendStateStyles(this.border, 'border');
    this.appendStateStyles(this.borderColor, 'borderColor');
    this.appendStateStyles(this.shadow, 'shadow');
  }
}
__decorate([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "backgroundColor", void 0);
__decorate([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "borderColor", void 0);
__decorate([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "border", void 0);
__decorate([
  MapToComponentField()
], VegaBoxStateStylesController.prototype, "shadow", void 0);
__decorate([
  MapToComponentMethod('componentWillLoad')
], VegaBoxStateStylesController.prototype, "componentWillLoad", null);
__decorate([
  MapToComponentMethod('watchBorder')
], VegaBoxStateStylesController.prototype, "watchBorder", null);
__decorate([
  MapToComponentMethod('watchShadow')
], VegaBoxStateStylesController.prototype, "watchShadow", null);
__decorate([
  MapToComponentMethod('watchBorderColor')
], VegaBoxStateStylesController.prototype, "watchBorderColor", null);
__decorate([
  MapToComponentMethod('watchBackgroundColor')
], VegaBoxStateStylesController.prototype, "watchBackgroundColor", null);
