import { Host, h } from '@stencil/core';
/**
 * Outputs a toast for informing users of a process (either success or failure) that an app has
 * performed or will perform.
 * @docsPage
 */
export class BsToast {
  constructor() {
    this.toastId = undefined;
    this.shown = undefined;
    this.variant = undefined;
    this.toastTitle = undefined;
    this.content = undefined;
    this.stacked = false;
    this.duration = 10000;
    this.primaryAction = 'Dismiss';
    this.primaryActionType = 'text';
    this.secondaryAction = undefined;
    this.secondaryActionType = 'text';
    this.tertiaryAction = undefined;
    this.tertiaryActionType = 'text';
    this.dismissAction = 'Dismiss';
    this.isShown = undefined;
    this.isDismissed = undefined;
  }
  /** Set internal shown / dismissed state to prop value */
  onShownChange(newVal, oldVal) {
    this.isShown = newVal;
    // Switched from showing to not showing, so play dismissed animation
    if (oldVal && !newVal) {
      this.isDismissed = true;
    }
    else {
      this.isDismissed = false;
    }
  }
  /** Initially sets internal states based on prop value */
  componentWillLoad() {
    this.onShownChange(this.shown, undefined);
  }
  /** Clear the dismiss timer to prevent unnecessary side-effects */
  clearTimer() {
    if (this.timer) {
      clearTimeout(this.timer);
      this.timer = undefined;
    }
  }
  /** Handles dismissal action */
  handleDismiss() {
    this.clearTimer();
    this.isShown = false;
    this.isDismissed = true;
    // Emit after 200ms (same as the css animation)
    // to allow for exit animation to play before potential removal from DOM
    setTimeout(() => this.dismiss.emit(this.toastId), 200);
  }
  /** Handle auto-dismissal of the toast when applicable */
  componentDidRender() {
    if (this.isShown && (this.duration > 0)) {
      this.clearTimer();
      this.timer = setTimeout(() => this.handleDismiss(), this.duration);
    }
  }
  /** Get icon based on variant */
  getIcon() {
    const attributes = {
      class: 'bs-toast-header-icon',
      part: 'bs-toast-header-icon'
    };
    switch (this.variant) {
      case 'warning':
        return h("bs-icon-warning", Object.assign({}, attributes));
      case 'positive':
        return h("bs-icon-thumbs-up-stroke", Object.assign({}, attributes));
      case 'negative':
        return h("bs-icon-warning", Object.assign({}, attributes));
      default:
        return h("bs-icon-circle-exclamation", Object.assign({}, attributes));
    }
  }
  /** Handles different actions on button click */
  handleButtonClick(action) {
    if (action === this.dismissAction) {
      this.handleDismiss();
    }
    else {
      this.actionclick.emit(`${this.toastId}::${action}`);
    }
  }
  /** Builds a button based on button type */
  getButton(action, type) {
    // No action, no button
    if (!action) {
      return undefined;
    }
    return (h("bs-button", { size: "sm", "ghost-btn": type === 'ghost' ? true : undefined, "text-btn": type === 'text' ? true : undefined, variant: this.variant, onClick: () => this.handleButtonClick(action) }, action));
  }
  render() {
    return (h(Host, { "data-variant": this.variant }, h("div", { class: "bs-toast", "data-shown": this.isShown, "data-dismissed": this.isDismissed, "data-variant": this.variant, "data-stacked": this.stacked, "aria-role": "alert", part: "bs-toast" }, h("div", { class: "bs-toast-header" }, this.getIcon(), h("h5", null, this.toastTitle)), h("div", { class: "bs-toast-content" }, h("p", null, h("slot", null, this.content))), h("div", { class: "bs-toast-actions" }, this.getButton(this.tertiaryAction, this.tertiaryActionType), this.getButton(this.secondaryAction, this.secondaryActionType), this.getButton(this.primaryAction, this.primaryActionType)))));
  }
  static get is() { return "bs-toast"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["bs-toast.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["bs-toast.css"]
    };
  }
  static get properties() {
    return {
      "toastId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "toast-id"
            }],
          "text": ""
        },
        "attribute": "toast-id",
        "reflect": false
      },
      "shown": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Whether or not the toast is shown. When this value flips from `true` to `false`,\nthe dismiss animation will play"
        },
        "attribute": "shown",
        "reflect": false
      },
      "variant": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'warning'|'positive'|'negative'",
          "resolved": "\"negative\" | \"positive\" | \"warning\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Controls the color/icon of the toast."
        },
        "attribute": "variant",
        "reflect": false
      },
      "toastTitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [{
              "name": "ex",
              "text": "Toast Title"
            }],
          "text": ""
        },
        "attribute": "toast-title",
        "reflect": false
      },
      "content": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Text content of the toast."
        },
        "attribute": "content",
        "reflect": false
      },
      "stacked": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Whether or not this toast is stacked with other toasts within a `toaster` component"
        },
        "attribute": "stacked",
        "reflect": false,
        "defaultValue": "false"
      },
      "duration": {
        "type": "number",
        "mutable": false,
        "complexType": {
          "original": "number",
          "resolved": "number",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Duration of the toast on the screen in milliseconds. Defaults to 10 seconds. Provide `0`\nfor this property to never auto-dismiss the toast."
        },
        "attribute": "duration",
        "reflect": false,
        "defaultValue": "10000"
      },
      "primaryAction": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Primary action name and display text. This will be the top-most / right-most button on\nmobile / non-mobile screens respectively. Defaults to `'Dismiss'`."
        },
        "attribute": "primary-action",
        "reflect": false,
        "defaultValue": "'Dismiss'"
      },
      "primaryActionType": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'text'|'ghost'|'primary'",
          "resolved": "\"ghost\" | \"primary\" | \"text\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Determines primary action button display. An `undefined` value makes this a filled-in button style.\nDefaults to `'text'`."
        },
        "attribute": "primary-action-type",
        "reflect": false,
        "defaultValue": "'text'"
      },
      "secondaryAction": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Secondary action name and display text. This will be the middle button on\nboth mobile and non-mobile screens."
        },
        "attribute": "secondary-action",
        "reflect": false
      },
      "secondaryActionType": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'text'|'ghost'|'primary'",
          "resolved": "\"ghost\" | \"primary\" | \"text\"",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Determines secondary action button display. An `undefined` value makes this a filled-in button style.\nDefaults to `'text'`."
        },
        "attribute": "secondary-action-type",
        "reflect": false,
        "defaultValue": "'text'"
      },
      "tertiaryAction": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "Tertiary action name and display text. This will be the bottom-most / left-most button on\nmobile / non-mobile screens respectively."
        },
        "attribute": "tertiary-action",
        "reflect": false
      },
      "tertiaryActionType": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "'text'|'ghost'|'primary'",
          "resolved": "\"ghost\" | \"primary\" | \"text\"",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Determines tertiary action button display. An `undefined` value makes this a filled-in button style.\nDefaults to `'text'`."
        },
        "attribute": "tertiary-action-type",
        "reflect": false,
        "defaultValue": "'text'"
      },
      "dismissAction": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Determines which of the actions should trigger toast dismissal. Defaults to `'Dismiss`'."
        },
        "attribute": "dismiss-action",
        "reflect": false,
        "defaultValue": "'Dismiss'"
      }
    };
  }
  static get states() {
    return {
      "isShown": {},
      "isDismissed": {}
    };
  }
  static get events() {
    return [{
        "method": "dismiss",
        "name": "dismiss",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits when the `dismiss-action` button is clicked or the toast dismisses automatically after\nthe `duration`. Event will have details in format &lt;toastId&gt;::&lt;dismissed&gt;."
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }, {
        "method": "actionclick",
        "name": "actionclick",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Emits when any of the action buttons (aside from `dismiss-action` button) are clicked.\nEvent will have details in format &lt;toastId&gt;::&lt;action&gt;."
        },
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        }
      }];
  }
  static get watchers() {
    return [{
        "propName": "shown",
        "methodName": "onShownChange"
      }];
  }
}
//# sourceMappingURL=bs-toast.js.map
