import { Component, Prop, h, Event } from '@stencil/core';
import { NotificationVariant, NotificationStatus, } from '../../types/NotificationTypes';
import { close, infoFilled, checkCircleFilled, alertFilled, errorFilled, } from '@teliads/icons';
export class TeliaNotification {
  constructor() {
    /** notification variant */
    this.variant = NotificationVariant.INLINE;
    /** notification status */
    this.status = NotificationStatus.INFORMATION;
    /** Defining the type of notification */
    this.htmlRole = null;
    /** Assistive technologies will announce dynamic changes in the content of a live region */
    this.htmlAriaLive = null;
    /** Tracking id is used to identify and count Component usage */
    this.dataTrackingId = 'telia-notification';
  }
  /**
   * Return icon name base on current notification status
   * @param currentStatus
   * @private
   */
  statusIcon(currentStatus) {
    switch (currentStatus) {
      case NotificationStatus.INFORMATION:
        return infoFilled.svg;
      case NotificationStatus.SUCCESS:
        return checkCircleFilled.svg;
      case NotificationStatus.WARNING:
        return alertFilled.svg;
      case NotificationStatus.ERROR:
        return errorFilled.svg;
    }
  }
  removeNotification() {
    this.vocaClose.emit(this.eventDetail);
  }
  render() {
    const componentClass = 'telia-notification';
    const wrapperClasses = {
      [`${componentClass}`]: true,
      [`${componentClass}--${this.variant}`]: true,
      [`${componentClass}--${this.status}`]: true,
    };
    return (h("article", { role: this.htmlRole, "aria-labelledby": this.htmlRole ? 'heading' : null, "aria-describedby": this.htmlRole ? 'content' : null, "aria-live": this.htmlAriaLive, class: wrapperClasses },
      h("telia-vst", { dataTrackingId: this.dataTrackingId }),
      h("header", { id: 'heading', class: componentClass + '__heading' },
        h("telia-icon", { class: componentClass + '__icon', size: 'md', svg: this.statusIcon(this.status) }),
        h("telia-heading", { variant: 'subsection-100', tag: this.headingTag },
          this.buttonText && (h("span", { class: componentClass + '__hidden', "aria-hidden": "true" }, this.buttonText)),
          h("slot", { name: 'heading' }))),
      h("div", { id: 'content' },
        h("slot", { name: 'content' })),
      this.buttonText && (h("telia-button", { class: componentClass + '__button', variant: "text", "ally-label": this.buttonText + ' ' + this.buttonAriaLabel, onClick: () => this.removeNotification() },
        this.buttonText,
        h("telia-icon", { slot: 'right', svg: close.svg, size: 'md' })))));
  }
  static get is() { return "telia-notification"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["telia-notification.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["telia-notification.css"]
  }; }
  static get properties() { return {
    "dataTestid": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Test id set for web component host"
      },
      "attribute": "data-testid",
      "reflect": false
    },
    "buttonText": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Button text, if left empty button will not render"
      },
      "attribute": "button-text",
      "reflect": false
    },
    "variant": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "NotificationVariantType",
        "resolved": "\"inline\"",
        "references": {
          "NotificationVariantType": {
            "location": "import",
            "path": "../../types/NotificationTypes"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "notification variant"
      },
      "attribute": "variant",
      "reflect": false,
      "defaultValue": "NotificationVariant.INLINE"
    },
    "status": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "NotificationStatusType",
        "resolved": "\"error\" | \"information\" | \"success\" | \"warning\"",
        "references": {
          "NotificationStatusType": {
            "location": "import",
            "path": "../../types/NotificationTypes"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "notification status"
      },
      "attribute": "status",
      "reflect": false,
      "defaultValue": "NotificationStatus.INFORMATION"
    },
    "htmlRole": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "NotificationRoleType",
        "resolved": "\"alert\" | \"alertdialog\" | \"dialog\"",
        "references": {
          "NotificationRoleType": {
            "location": "import",
            "path": "../../types/NotificationTypes"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Defining the type of notification"
      },
      "attribute": "html-role",
      "reflect": false,
      "defaultValue": "null"
    },
    "htmlAriaLive": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "NotificationLiveType",
        "resolved": "\"assertive\" | \"polite\"",
        "references": {
          "NotificationLiveType": {
            "location": "import",
            "path": "../../types/NotificationTypes"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Assistive technologies will announce dynamic changes in the content of a live region"
      },
      "attribute": "html-aria-live",
      "reflect": false,
      "defaultValue": "null"
    },
    "buttonAriaLabel": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "aria-label for button, should be corresponding to the status in your native language"
      },
      "attribute": "button-aria-label",
      "reflect": false
    },
    "eventDetail": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Sets event detail, used for changes that should happen after notification is removed from page"
      },
      "attribute": "event-detail",
      "reflect": false
    },
    "headingTag": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "HTagType",
        "resolved": "\"h1\" | \"h2\" | \"h3\" | \"h4\" | \"h5\" | \"h6\"",
        "references": {
          "HTagType": {
            "location": "import",
            "path": "../../types/HTag"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "html-tag of the heading element"
      },
      "attribute": "heading-tag",
      "reflect": false
    }
  }; }
  static get events() { return [{
      "method": "vocaClose",
      "name": "vocaClose",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "close event"
      },
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      }
    }]; }
}
