import { Component, Event, h, Prop } from '@stencil/core';
import { MDCSelect } from '@material/select';
export class NkMintButton {
  constructor() {
    this.disabled = false;
    this.loading = false;
    this.selectedValue = -1;
    this.placeholder = 'Mint NFT';
    this.values = [];
    this.select = null;
  }
  render() {
    this.setValues();
    const selectClasses = `mdc-select mdc-select--filled mdc-select--no-label ${this.disabled ? 'mdc-select--disabled' : ''}`;
    return (h("div", { part: "mint-btn-container", class: selectClasses, ref: el => (this.container = el) },
      h("div", { part: "mint-btn", class: "mdc-select__anchor", role: "button", "aria-haspopup": "listbox", "aria-expanded": "false", "aria-labelledby": "mint-selected-text" },
        h("span", { class: "mdc-select__ripple" }),
        h("span", { class: "mdc-select__selected-text-container" },
          h("span", { part: "mint-text", id: "mint-selected-text", class: "mdc-select__selected-text", ref: el => (this.selectedText = el) })),
        h("span", { part: "mint-dropdown-icon", class: "mdc-select__dropdown-icon" },
          h("svg", { class: "mdc-select__dropdown-icon-graphic", viewBox: "7 10 10 5", focusable: "false" },
            h("polygon", { class: "mdc-select__dropdown-icon-inactive", stroke: "none", "fill-rule": "evenodd", points: "7 10 12 15 17 10" }),
            h("polygon", { class: "mdc-select__dropdown-icon-active", stroke: "none", "fill-rule": "evenodd", points: "7 15 12 10 17 15" })))),
      h("div", { class: "mdc-select__menu mdc-menu mdc-menu-surface mdc-menu-surface--fullwidth" },
        h("ul", { class: "mdc-deprecated-list", role: "listbox", "aria-label": "Quantity Picker listbox" }, this.values.map(value => (h("li", { class: this.optionClasses(value), "aria-selected": value === this.selectedValue, "data-value": value, role: "option" },
          h("span", { class: "mdc-deprecated-list-item__ripple" }),
          h("span", { class: "mdc-deprecated-list-item__text" }, value))))))));
  }
  componentDidUpdate() {
    if (this.select) {
      this.select.value = this.selectedValue.toString();
      this.setSelectedText();
    }
  }
  componentDidLoad() {
    this.setSelectedText();
    this.select = new MDCSelect(this.container);
    this.select.listen('MDCSelect:change', () => {
      const value = Number(this.select.value);
      this.tokensChanged.emit(value);
    });
  }
  setSelectedText() {
    setTimeout(() => {
      const result = this.selectedValue < 0 ? this.placeholder : this.selectedValue.toString();
      this.selectedText.innerHTML = this.loading ? '<nk-loading></nk-loading>' : result;
    }, 10);
  }
  setValues() {
    this.values = [];
    // Fills the tokens array with the total supply
    for (let i = 0; i < this.maxPerMint; i++) {
      this.values = [...this.values, i + 1];
    }
  }
  optionClasses(value) {
    return `mdc-deprecated-list-item ${this.selectedValue === value ? 'mdc-deprecated-list-item--selected' : ''}`;
  }
  static get is() { return "nk-mint-button"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["nk-mint-button.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["nk-mint-button.css"]
  }; }
  static get properties() { return {
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "disabled",
      "reflect": false,
      "defaultValue": "false"
    },
    "loading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "loading",
      "reflect": false,
      "defaultValue": "false"
    },
    "maxPerMint": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": true,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "max-per-mint",
      "reflect": false
    },
    "selectedValue": {
      "type": "number",
      "mutable": false,
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "selected-value",
      "reflect": false,
      "defaultValue": "-1"
    },
    "placeholder": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "placeholder",
      "reflect": false,
      "defaultValue": "'Mint NFT'"
    }
  }; }
  static get events() { return [{
      "method": "tokensChanged",
      "name": "tokensChanged",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "number",
        "resolved": "number",
        "references": {}
      }
    }]; }
}
