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 { Host, h } from '@stencil/core';
import { VegaSlimmer, MapToComponentField } from 'vega-slimmer/core';
import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
import { arrayToClassString, getDeviceType } from '../../../../utils/ui';
import { DeviceType } from '../../../../types/ui.type';
/** The code snippet you provided is defining a TypeScript class called `VegaBannerRenderer` that extends `VegaSlimmer`. Within this class, there are several properties annotated with `@MapToComponentField()` decorator, which likely indicates that these properties will be mapped to corresponding fields in a component. */
export class VegaBannerRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
    this.space = this.isMobileDevice ? 'size-16' : 'size-24';
    /**
     * invoke the method to remove the component host element
     */
    this.handleCloseButtonClick = () => {
      const closeEvent = this.closeEventEmitter.emit();
      if (closeEvent && !closeEvent.defaultPrevented) {
        this.host.remove();
      }
    };
  }
  /**
   * The `render()` method in the `VegaBannerRenderer` class is responsible for rendering the HTML
   * structure of the banner component based on the properties set in the class.
   */
  render() {
    const hostClassName = [
      `banner-${this.type}`,
      this.isMobileDevice && 'banner-mobile',
      !this.isOpen && 'banner-hidden',
      !this.bannerTitle && 'banner-no-title',
    ].filter(Boolean);
    return (h(Host, { class: arrayToClassString(hostClassName), padding: this.space },
      h("vega-flex", { direction: "row", gap: this.isMobileDevice ? 'size-8' : 'size-16', justifyContent: "space-between", alignItems: "start" },
        this.renderPrefixIcon(),
        this.renderBannerContent(),
        this.renderCloseButton()),
      this.isMobileDevice ? this.actionButtonRenderer.render() : null));
  }
  /**
   * rendering the content structure of the banner component.
   *
   * @returns {HTMLElement} the banner content element
   */
  renderBannerContent() {
    const hasContentSlot = this.hasContentSlot();
    return (h("div", { class: {
        ['banner-content-container']: true,
        ['linear']: !this.isMobileDevice && ((!this.content && !hasContentSlot) || !this.bannerTitle),
      } },
      this.renderBannerTitle(),
      h("div", { class: "banner-content" },
        hasContentSlot ? (h("slot", { name: "content" })) : (h("vega-font", { variant: this.isMobileDevice ? 'font-footnote1-long' : 'font-p2-short', color: this.type === 'error' ? 'text-primary' : 'text-black' }, this.content)),
        this.isMobileDevice ? null : this.actionButtonRenderer.render())));
  }
  /**
   * Checks whether the host element contains a slotted element targeting the "content" slot.
   *
   * @returns {boolean} `true` if a child element with `slot="content"` exists, `false` otherwise.
   */
  hasContentSlot() {
    return this.host.querySelector('[slot="content"]') !== null;
  }
  /**
   * Get banner title element by property
   *
   * @returns {Nullable<HTMLVegaFontElement>} vega-font element if property is not empty
   */
  renderBannerTitle() {
    if (this.bannerTitle) {
      return (h("vega-font", { class: "banner-title", variant: this.isMobileDevice ? 'font-h6' : 'font-h5', color: this.type === 'error' ? 'text-primary' : 'text-black' }, this.bannerTitle));
    }
  }
  /**
   * rendering the close button in banner component
   *
   * @returns {Nullable<HTMLElement>} the close button element
   */
  renderCloseButton() {
    if (this.showCloseButton) {
      return (h("div", { class: "banner-close-button", "aria-label": "Close Button", role: 'button', tabIndex: 0, onClick: this.handleCloseButtonClick, onKeyDown: createEnterKeyHandlerToTriggerClick() },
        h("vega-icon", { size: this.isMobileDevice ? 'size-12' : 'size-16', icon: this.iconController.getCloseIcon() })));
    }
  }
  /**
   * rendering the match icon for banner component
   *
   * @returns {HTMLElement} the icon element
   */
  renderPrefixIcon() {
    return (h("div", { class: "banner-prefix-icon" },
      h("vega-icon", { size: this.space, icon: this.iconController.getIconByType() })));
  }
}
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "type", void 0);
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "bannerTitle", void 0);
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "content", void 0);
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "showCloseButton", void 0);
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "actionButtons", void 0);
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "actionButtonRenderer", void 0);
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "iconController", void 0);
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "isOpen", void 0);
__decorate([
  MapToComponentField()
], VegaBannerRenderer.prototype, "closeEventEmitter", void 0);
