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 { MapToComponentField, VegaSlimmer } from 'vega-slimmer/core';
import { Fragment, h, Host } from '@stencil/core';
import { generateUUID } from '../../../../utils/misc';
import { createEnterKeyHandlerToTriggerClick } from '../../../../utils/accessibility';
import { DefaultModalSize } from '../../../../constants/ui';
import { isResponsiveSizeType, isVegaModalSectionPaddingType } from '../../../../types/type-guard';
/**
 * Modal renderer
 */
export class VegaModalRenderer extends VegaSlimmer {
  constructor() {
    super(...arguments);
    this.titleId = generateUUID();
  }
  getModalContentRef() {
    return this.modalContent;
  }
  getModalFooterRef() {
    return this.modalFooter;
  }
  getModalContainerRef() {
    return this.modalContainer;
  }
  render() {
    return (h(Host, { class: {
        'align-center': this.deprecatedPropertySlimmer.getValue() && this.openState.isOpen,
        'animation': this.animation,
        'is-section-padding': isVegaModalSectionPaddingType(this.padding),
      } },
      h("vega-box", { class: "modal-dialog", role: "dialog", "aria-modal": "true", "aria-labelledby": this.titleId, width: isResponsiveSizeType(this.size) ? this.size : DefaultModalSize, height: this.height, margin: this.margin }, this.renderContainer())));
  }
  renderContainer() {
    return (h("div", { class: "modal-container", ref: (node) => (this.modalContainer = node) },
      this.renderHeader(),
      this.renderContent(),
      this.renderFooter()));
  }
  renderHeader() {
    return (h("vega-box", { class: {
        'vega-modal-header': true,
        'vega-modal-header-with-title': this.hasModalTitle(),
        'vega-modal-header-with-icon': this.showCloseButton,
        'vega-modal-header-with-content-scroll': this.isContentScrollable(),
      }, padding: this.sectionPaddingState.getHeaderPadding(), id: this.titleId },
      this.renderTitle(),
      this.showCloseButton && this.renderCloseBtn()));
  }
  renderContent() {
    return (h("vega-box", { class: {
        'vega-modal-content': true,
        'vega-modal-content-with-scroll': this.isContentScrollable(),
      }, padding: this.sectionPaddingState.getContentPadding(), maxHeight: this.contentMaxHeight, ref: (e) => (this.modalContent = e), role: this.isContentScrollable() ? 'document' : undefined, tabindex: this.isContentScrollable() ? '-1' : undefined },
      h(Fragment, null,
        h("slot", null),
        h("slot", { name: "content" }),
        h("slot", { name: "modal-content" }))));
  }
  renderFooter() {
    return (h("vega-box", { class: {
        'vega-modal-footer': true,
        'vega-modal-footer-with-slot': this.hasModalFooter(),
        'vega-modal-footer-with-content-scroll': this.isContentScrollable(),
      }, padding: this.sectionPaddingState.getFooterPadding(), ref: (e) => (this.modalFooter = e) },
      h(Fragment, null,
        h("slot", { name: "footer" }),
        h("slot", { name: "modal-footer" }))));
  }
  renderTitle() {
    return (h("div", { class: "vega-modal-title" }, this.modalTitle ? (h("div", { innerHTML: this.modalTitle })) : (h(Fragment, null,
      h("slot", { name: "title" }),
      h("slot", { name: "modal-title" })))));
  }
  renderCloseBtn() {
    return (h("div", { "aria-label": "Close Button", class: "vega-modal-close-btn", "data-dismiss": "modal", onClick: this.openStateController.onModalClose, role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
      h("vega-icon", { icon: "close", size: "size-16" })));
  }
  hasModalFooter() {
    return (this.host.querySelector(`[slot='modal-footer']`) !== null ||
      this.host.querySelector(`[slot='footer']`) !== null);
  }
  isContentScrollable() {
    return Boolean(this.contentMaxHeight);
  }
  hasModalTitle() {
    return (Boolean(this.modalTitle) ||
      this.host.querySelector(`[slot='modal-title']`) !== null ||
      this.host.querySelector(`[slot='title']`) !== null);
  }
}
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "host", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "animation", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "open", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "openState", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "padding", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "margin", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "size", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "height", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "showCloseButton", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "modalTitle", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "contentMaxHeight", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "handleClose", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "deprecatedPropertySlimmer", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "openStateController", void 0);
__decorate([
  MapToComponentField()
], VegaModalRenderer.prototype, "sectionPaddingState", void 0);
