import { Host, h, } from '@stencil/core';
import { hasSlot } from '../../utils/utils';
/**
 * @part icon - the toast's close icon
 * @part message - the toast's message
 * @part container - the toast's container element
 *
 * @slot (default) - the toast's message
 */
export class RuxToast {
  constructor() {
    this._timeoutRef = null;
    this.hasMessageSlot = false;
    this.message = '';
    this.closeAfter = undefined;
    this.hideClose = false;
  }
  watchHandler() {
    this._updated();
  }
  connectedCallback() {
    this._handleSlotChange = this._handleSlotChange.bind(this);
    this._updated();
    this.hasMessageSlot = hasSlot(this.el);
    this._onClick = this._onClick.bind(this);
    this._onKeyPress = this._onKeyPress.bind(this);
  }
  componentDidLoad() {
    this._handleOpen();
  }
  _handleOpen() {
    this.ruxToastOpen.emit();
  }
  _handleClose() {
    this.ruxToastClosed.emit();
    this.el.remove();
  }
  _updated() {
    if (this._closeAfter) {
      this._timeoutRef = window.setTimeout(() => {
        this._handleClose();
      }, this._closeAfter);
    }
  }
  _onClick() {
    if (this._timeoutRef) {
      clearTimeout(this._timeoutRef);
    }
    this._handleClose();
  }
  _onKeyPress(e) {
    if (e.key === 'Enter') {
      this._onClick();
    }
  }
  get _closeAfter() {
    //* as long as it's less than 1000, they put in seconds. Convert that here.
    if (this.closeAfter && this.closeAfter <= 999) {
      //it's in seconds
      this.closeAfter *= 1000; // change into ms
    }
    if ((this.closeAfter && this.closeAfter > 10000) ||
      (this.closeAfter && this.closeAfter < 2000)) {
      // if this number is larger than 10s or smaller than 2s, enforce minimum 2s delay
      this.closeAfter = 2000;
    }
    return this.closeAfter;
  }
  _handleSlotChange() {
    this.hasMessageSlot = hasSlot(this.el);
  }
  render() {
    return (h(Host, null, h("div", { class: {
        'rux-toast': true,
      }, part: "container" }, h("div", { class: {
        'rux-toast__content': true,
      }, part: "message" }, h("slot", { onSlotchange: this._handleSlotChange }), !this.hasMessageSlot && this.message ? (h("span", null, this.message)) : null), !this.hideClose ? (h("div", { class: "rux-toast__actions" }, h("rux-icon", { role: "button", tabindex: "1", class: "rux-toast__close", onClick: this._onClick, onKeyDown: this._onKeyPress, icon: "clear", exportparts: "icon", size: "16px" }))) : null)));
  }
  static get is() { return "rux-toast"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["rux-toast.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["rux-toast.css"]
    };
  }
  static get properties() {
    return {
      "message": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Message for the toast."
        },
        "attribute": "message",
        "reflect": true,
        "defaultValue": "''"
      },
      "closeAfter": {
        "type": "number",
        "mutable": true,
        "complexType": {
          "original": "number",
          "resolved": "number | undefined",
          "references": {}
        },
        "required": false,
        "optional": true,
        "docs": {
          "tags": [],
          "text": "If provided, the toast will automatically close after this amount of time. Accepts value either in milliseconds or seconds (which will be converted to milliseconds internally), between `2000` and `10000`, or `2` and `10`, respectively. Any number provided outside of the `2000`-`10000` range will be ignored in favor of the default 2000ms delay. <br>If `closeAfter` is not passed or if it is given an undefined or `null` value, the toast will stay open until the user closes it."
        },
        "attribute": "close-after",
        "reflect": true
      },
      "hideClose": {
        "type": "boolean",
        "mutable": false,
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Prevents the user from dismissing the notification. Hides the close icon."
        },
        "attribute": "hide-close",
        "reflect": true,
        "defaultValue": "false"
      }
    };
  }
  static get states() {
    return {
      "hasMessageSlot": {}
    };
  }
  static get events() {
    return [{
        "method": "ruxToastOpen",
        "name": "ruxtoastopen",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Fires when a toast is opened"
        },
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        }
      }, {
        "method": "ruxToastClosed",
        "name": "ruxtoastclosed",
        "bubbles": true,
        "cancelable": true,
        "composed": true,
        "docs": {
          "tags": [],
          "text": "Fires when a toast is closed"
        },
        "complexType": {
          "original": "boolean",
          "resolved": "boolean",
          "references": {}
        }
      }];
  }
  static get elementRef() { return "el"; }
  static get watchers() {
    return [{
        "propName": "closeAfter",
        "methodName": "watchHandler"
      }];
  }
}
