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 { Component, Element, h, Host, Prop, State } from '@stencil/core';
import { sanitizeVegaComponent } from '../../utils/component';
import { getCurrentBreakpoint } from '../../utils/public-api';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { PageResizeObserverSlimmer } from '../../helpers/slimmers/page-resize-observer-slimmer';
import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaClick, VegaClose } from '../../helpers/event-manager/event-id/vega-event-id';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
/**
 * @vegaVersion 1.24.0
 */
export class VegaDialog {
  constructor() {
    this.globalSlimmers = {};
    /**
     * The below method is e2e-test covered in
     * @see{module:vega-dialog-resize-e2e}
     */
    this.pageResizeObserverSlimmer = new PageResizeObserverSlimmer();
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    /**
     * the default size for DESKTOP and TABLET
     */
    this.dialogDefaultSize = 480;
    this.currentBreakpoint = getCurrentBreakpoint();
    /**
     * Specifies the type of the dialog.
     *
     * Use the value `danger` when the dialog's primary action is destructive.
     *
     * @vegaVersion 1.24.0
     */
    this.type = 'default';
    /**
     * Determines whether the cancel button should be displayed.
     *
     * @vegaVersion 1.24.0
     */
    this.showCancel = true;
    /**
     * Represents a dictionary that contains the configuration options
     *    for the modal component used to display the dialog.
     *
     * @vegaVersion 1.24.0
     */
    this.modalProps = {};
    this.handleCancelBtnClick = (e) => {
      const event = new CustomEvent('vegaClick', {
        detail: e.detail,
      });
      if (!this.handleCancel || this.handleCancel(event)) {
        this.host.remove();
      }
    };
    this.handleOkBtnClick = (e) => {
      const event = new CustomEvent('vegaClick', {
        detail: e.detail,
      });
      if (!this.handleOk || this.handleOk(event)) {
        this.host.remove();
      }
    };
  }
  render() {
    var _a, _b;
    const isSmallScreen = ['default', 'S'].includes(this.currentBreakpoint);
    const actionButtonSize = { default: 'default', M: 'small' };
    const isDanger = this.type === 'danger';
    const mergedOkButtonProps = Object.assign(Object.assign({ size: actionButtonSize, danger: isDanger }, this.okButton), { block: isSmallScreen });
    const mergedCancelButtonProps = Object.assign(Object.assign({ size: actionButtonSize, variant: 'secondary', danger: isDanger }, this.cancelButton), { block: isSmallScreen });
    const mergedModalProps = Object.assign(Object.assign({}, this.modalProps), { isVerticallyCentered: this.modalProps.isVerticallyCentered !== undefined ||
        this.modalProps.isVerticallyCenter !== undefined
        ? this.modalProps.isVerticallyCentered || this.modalProps.isVerticallyCenter
        : isSmallScreen, size: this.modalProps.size || this.dialogDefaultSize, open: true, modalTitle: this.dialogTitle, backdrop: 'static' });
    return sanitizeVegaComponent(h(Host, null,
      h("vega-modal", Object.assign({}, mergedModalProps, { ref: (ref) => {
          DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClose, () => {
            this.onModalClose();
          });
        } }),
        h("div", { slot: "modal-content", class: "vega-dialog-modal-content" }, this.content),
        h("div", { slot: "modal-footer" },
          h("div", { class: "vega-dialog-actions-container" },
            this.showCancel && (h("vega-button", Object.assign({}, mergedCancelButtonProps, { ref: (ref) => {
                DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
                  this.handleCancelBtnClick(input);
                });
              } }), ((_a = this.cancelButton) === null || _a === void 0 ? void 0 : _a.label) || 'Cancel')),
            h("vega-button", Object.assign({}, mergedOkButtonProps, { ref: (ref) => {
                DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, (input) => {
                  this.handleOkBtnClick(input);
                });
              } }), ((_b = this.okButton) === null || _b === void 0 ? void 0 : _b.label) || 'OK'))))), this.host);
  }
  onModalClose() {
    this.host.remove();
  }
  static get is() { return "vega-dialog"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-dialog.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-dialog.css"]
  }; }
  static get properties() { return {
    "dialogTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Specifies the title of the dialog."
      },
      "attribute": "dialog-title",
      "reflect": false
    },
    "content": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Specifies the text content of the dialog."
      },
      "attribute": "content",
      "reflect": false
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "'default' | 'danger'",
        "resolved": "\"danger\" | \"default\"",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Specifies the type of the dialog.\n\nUse the value `danger` when the dialog's primary action is destructive."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'default'"
    },
    "okButton": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "VegaDialogActionButtonProps",
        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; danger?: boolean; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
        "references": {
          "VegaDialogActionButtonProps": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Represents a dictionary that contains the configuration options\n   for the action button in the dialog."
      }
    },
    "handleOk": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "VegaDialogAction",
        "resolved": "(e: CustomEvent<void>) => boolean",
        "references": {
          "VegaDialogAction": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Represents the function that will be executed when the\n   user clicks the action button in the dialog."
      }
    },
    "cancelButton": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "VegaDialogActionButtonProps",
        "resolved": "{ size?: ResponsiveType<VegaButtonSize>; icon?: string; label?: string; danger?: boolean; variant?: VegaButtonVariant; iconAlign?: VegaButtonIconAlign; disabled?: boolean; }",
        "references": {
          "VegaDialogActionButtonProps": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Represents a dictionary that contains the configuration options\n   for the cancel button in the dialog."
      }
    },
    "handleCancel": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "VegaDialogAction",
        "resolved": "(e: CustomEvent<void>) => boolean",
        "references": {
          "VegaDialogAction": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Represents the function that will be executed when the user\n   clicks the cancel button in the dialog."
      }
    },
    "showCancel": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Determines whether the cancel button should be displayed."
      },
      "attribute": "show-cancel",
      "reflect": false,
      "defaultValue": "true"
    },
    "modalProps": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Partial<VegaComponentInterface<HTMLVegaModalElement>>",
        "resolved": "{ size?: ResponsiveType<SizeType>; margin?: ResponsiveType<MarginType>; animation?: boolean; backdrop?: VegaModalBackdrop; backdropColor?: VegaModalBackdropColor; contentMaxHeight?: ResponsiveType<string | number>; handleClose?: () => boolean; height?: ResponsiveType<string | number>; isVerticallyCenter?: boolean; isVerticallyCentered?: boolean; modal?: (option: \"show\" | \"hide\") => Promise<void>; modalTitle?: string; open?: boolean; padding?: ResponsiveType<PaddingType> | VegaModalSectionPadding; showCloseButton?: boolean; }",
        "references": {
          "Partial": {
            "location": "global"
          },
          "VegaComponentInterface": {
            "location": "import",
            "path": "../../types/ui.type"
          },
          "HTMLVegaModalElement": {
            "location": "global"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.24.0"
          }],
        "text": "Represents a dictionary that contains the configuration options\n   for the modal component used to display the dialog."
      },
      "defaultValue": "{}"
    }
  }; }
  static get states() { return {
    "currentBreakpoint": {}
  }; }
  static get elementRef() { return "host"; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaDialog.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaDialog.prototype, "pageResizeObserverSlimmer", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaDialog.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
