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, Host, h, Element, Prop, Method } from '@stencil/core';
import { createEnterKeyHandlerToTriggerClick } from '../../utils/accessibility';
import { sanitizeVegaComponent } from '../../utils/component';
import { arrayToClassString, getDeviceType } from '../../utils/ui';
import { DeviceType } from '../../types/ui.type';
import { InjectVegaGlobalSlimmer, InjectVegaSlimmer } from 'vega-slimmer/core';
import { DomNodeSubjectObserverFactory } from '../../helpers/change-manager/subject/dom-node-subject/dom-node-subject-observer-factory';
import { VegaClick } from '../../helpers/event-manager/event-id/vega-event-id';
import { VegaComponentUsageRuntimeMetricsSlimmer } from '../../helpers/slimmers/component-usage-runtime-metrics';
const typeIconMap = {
  success: 'checkmark-circle',
  warning: 'warning-triangle-filled',
  error: 'help-filled',
  info: 'info-circle-filled',
};
/**
 * @vegaVersion 1.17.0
 */
export class VegaPageNotification {
  constructor() {
    this.globalSlimmers = {};
    this.vegaComponentUsageRuntimeMetricsSlimmer = new VegaComponentUsageRuntimeMetricsSlimmer();
    this.isMobileDevice = getDeviceType() === DeviceType.MOBILE;
    /**
     * Specifies the title text for the page notification.
     *
     * It provides users with a concise and informative message
     *    that communicates the purpose or nature of the notification.
     *
     * @vegaVersion 1.17.0
     */
    this.notificationTitle = '';
    /**
     * Specifies the content text for the page notification.
     *
     * It provides a detailed message or information that
     *    further explains the purpose or context of
     *    the notification.
     *
     * @vegaVersion 1.17.0
     */
    this.message = '';
    /**
     * Specifies the type of page notification,
     *    indicating the visual style or category of
     *    the notification.
     *
     * @vegaVersion 1.17.0
     */
    this.type = 'info';
    /**
     * Specifies the duration, in milliseconds, before the
     *    page notification automatically closes.
     *
     * If the duration is set to `0`, the notification will not
     *    close automatically.
     *
     * @vegaVersion 1.17.0
     */
    this.duration = 5000;
    /**
     * Specifies whether to display the close button for
     *    the page notification.
     *
     * @vegaVersion 1.17.0
     */
    this.showCloseButton = true;
    /**
     * Specifies the configuration array for the action buttons of
     *    the page notification.
     *
     * The action buttons provide interactive options for users to
     *    perform specific actions or operations related to
     *    the notification.
     *
     * @vegaVersion 1.17.0
     */
    this.actionButtons = [];
    this.renderPrefixIcon = () => {
      return (h("div", { class: "vega-page-notification-prefix" },
        h("vega-icon", { icon: typeIconMap[this.type], size: this.isMobileDevice ? 'size-16' : 'size-24' })));
    };
    this.renderContent = () => {
      return (h("div", { class: "vega-page-notification-content" },
        this.notificationTitle && (h("div", { class: "vega-page-notification-title" }, this.notificationTitle)),
        h("div", { class: "vega-page-notification-message" }, this.message)));
    };
    this.autoCloseAfterDuration = () => {
      if (this.duration > 0) {
        setTimeout(() => {
          void this.close();
        }, this.duration);
      }
    };
  }
  componentDidLoad() {
    this.autoCloseAfterDuration();
  }
  /**
   * Invoke this method to close the page notification.
   *
   * @vegaVersion 1.17.0
   */
  async close() {
    this.host.classList.add('vega-page-notification-fade-out');
    setTimeout(() => {
      this.host.remove();
    }, 300);
  }
  render() {
    const classNames = arrayToClassString([this.type, this.isMobileDevice && 'mobile'].filter(Boolean));
    return sanitizeVegaComponent(h(Host, { class: classNames },
      h("vega-box", { padding: this.isMobileDevice ? 'size-16' : 'size-24' },
        h("vega-flex", { gap: "size-16" },
          this.renderPrefixIcon(),
          this.renderContent(),
          this.renderCloseButtons()),
        this.renderActionButtons())), this.host);
  }
  renderCloseButtons() {
    if (!this.showCloseButton)
      return;
    return (h("div", { "aria-label": "Close Button", class: "vega-page-notification-close-btn", 
      /* eslint-disable-next-line react/jsx-no-bind */
      onClick: () => this.close(), role: 'button', tabIndex: 0, onKeyDown: createEnterKeyHandlerToTriggerClick() },
      h("vega-icon", { icon: "close", size: this.isMobileDevice ? 'size-12' : 'size-16' })));
  }
  renderActionButtons() {
    if (!this.actionButtons || this.actionButtons.length === 0)
      return;
    return (h("div", { class: "vega-page-notification-actions-container" }, this.actionButtons.map((actionButton) => (h("vega-button", { size: this.isMobileDevice ? 'small' : 'default', label: actionButton.label, variant: "secondary", ref: (ref) => {
        DomNodeSubjectObserverFactory.addUniqueObserverToNode(ref, VegaClick, actionButton.onVegaClick);
      } })))));
  }
  static get is() { return "vega-page-notification"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["vega-page-notification.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["vega-page-notification.css"]
  }; }
  static get properties() { return {
    "notificationTitle": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.17.0"
          }],
        "text": "Specifies the title text for the page notification.\n\nIt provides users with a concise and informative message\n   that communicates the purpose or nature of the notification."
      },
      "attribute": "title",
      "reflect": false,
      "defaultValue": "''"
    },
    "message": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.17.0"
          }],
        "text": "Specifies the content text for the page notification.\n\nIt provides a detailed message or information that\n   further explains the purpose or context of\n   the notification."
      },
      "attribute": "message",
      "reflect": false,
      "defaultValue": "''"
    },
    "type": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "VegaPageNotificationTypes",
        "resolved": "\"error\" | \"info\" | \"success\" | \"warning\"",
        "references": {
          "VegaPageNotificationTypes": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.17.0"
          }],
        "text": "Specifies the type of page notification,\n   indicating the visual style or category of\n   the notification."
      },
      "attribute": "type",
      "reflect": false,
      "defaultValue": "'info'"
    },
    "duration": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.17.0"
          }],
        "text": "Specifies the duration, in milliseconds, before the\n   page notification automatically closes.\n\nIf the duration is set to `0`, the notification will not\n   close automatically."
      },
      "attribute": "duration",
      "reflect": false,
      "defaultValue": "5000"
    },
    "showCloseButton": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.17.0"
          }],
        "text": "Specifies whether to display the close button for\n   the page notification."
      },
      "attribute": "show-close-button",
      "reflect": false,
      "defaultValue": "true"
    },
    "actionButtons": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "VegaPageNotificationActionButtonConfig[]",
        "resolved": "VegaPageNotificationActionButtonConfig[]",
        "references": {
          "VegaPageNotificationActionButtonConfig": {
            "location": "import",
            "path": "./types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [{
            "name": "vegaVersion",
            "text": "1.17.0"
          }],
        "text": "Specifies the configuration array for the action buttons of\n   the page notification.\n\nThe action buttons provide interactive options for users to\n   perform specific actions or operations related to\n   the notification."
      },
      "defaultValue": "[]"
    }
  }; }
  static get methods() { return {
    "close": {
      "complexType": {
        "signature": "() => Promise<void>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<void>"
      },
      "docs": {
        "text": "Invoke this method to close the page notification.",
        "tags": [{
            "name": "vegaVersion",
            "text": "1.17.0"
          }]
      }
    }
  }; }
  static get elementRef() { return "host"; }
}
__decorate([
  InjectVegaGlobalSlimmer()
], VegaPageNotification.prototype, "globalSlimmers", void 0);
__decorate([
  InjectVegaSlimmer()
], VegaPageNotification.prototype, "vegaComponentUsageRuntimeMetricsSlimmer", void 0);
