import { h, Host } from "@stencil/core";
import { ethers } from "ethers";
import { watchBlockNumber } from "@wagmi/core";
import state from "../../stores/wallet";
export class NKDropMintCrossmintButton {
  constructor() {
    this.handleWindowEvent = (e) => {
      const { data: { type }, } = e;
      const loadingEvents = [
        'payment:preparation.succeeded',
        'payment:process.started',
      ];
      const successEvents = ['payment:process.succeeded'];
      const failedEvents = [
        'payment:rejected',
        'payment:preparation.failed',
        'quote:status.invalidated',
      ];
      if (loadingEvents.includes(type)) {
        this.loading = true;
      }
      if (successEvents.includes(type)) {
        this.dialogTitle = this.successTitle;
        this.dialogMessage = this.successMessage;
        this.dialogOpen = true;
        this.loading = false;
      }
      if (failedEvents.includes(type)) {
        this.dialogTitle = 'Error';
        this.dialogMessage = 'Payment failed';
        this.dialogOpen = true;
        this.loading = false;
      }
    };
    this.projectId = undefined;
    this.collectionId = undefined;
    this.successTitle = 'Success';
    this.successMessage = 'Successfully minted an NFT';
    this.disabled = true;
    this.loading = true;
    this.mintTo = null;
    this.saleActive = undefined;
    this.presaleActive = undefined;
    this.isOpen = false;
    this.dialogOpen = false;
    this.mintConfig = {
      type: 'erc-721',
      quantity: '1',
      totalPrice: '0',
    };
  }
  componentDidLoad() {
    this.crossmintUpdate();
  }
  componentDidUpdate() {
    this.crossmintUpdate();
  }
  componentWillLoad() {
    this.disconnect = watchBlockNumber({ listen: true }, async () => {
      const { address } = state.client.getAccount();
      const [saleActive, presaleActive, price] = await Promise.all([
        state.diamond.apps.drop.saleActive(),
        state.diamond.apps.drop.presaleActive(),
        state.diamond.apps.drop.price(),
      ]);
      this.mintTo = address;
      this.saleActive = saleActive;
      this.presaleActive = presaleActive;
      this.mintConfig = Object.assign(Object.assign({}, this.mintConfig), { totalPrice: ethers.utils.formatEther(price) });
      this.loading = false;
      // sale not active then disable widget
      this.disabled = !(this.saleActive || this.presaleActive);
    });
    if (typeof window !== 'undefined') {
      window.addEventListener('message', this.handleWindowEvent);
    }
  }
  disconnectedCallback() {
    this.disconnect();
    if (typeof window !== 'undefined') {
      window.removeEventListener('message', this.handleWindowEvent);
    }
  }
  crossmintUpdate() {
    this.crossmintButton.setAttribute('mintConfig', JSON.stringify(this.mintConfig, null, 2));
    const shadowRoot = this.crossmintButton.shadowRoot;
    if (shadowRoot) {
      const img = shadowRoot.querySelector('img');
      if (img) {
        img.style.display = 'none';
      }
    }
  }
  async openModal() {
    this.loading = true;
    try {
      this.isOpen = true;
    }
    catch (e) {
      this.loading = false;
      this.isOpen = false;
      this.dialogTitle = 'Error';
      this.dialogMessage = e.message;
      this.dialogOpen = true;
    }
  }
  render() {
    return (h(Host, null, h("script", { src: "https://unpkg.com/@crossmint/client-sdk-vanilla-ui@1.0.1-alpha.4/lib/index.global.js" }), h("div", { part: "crossmint-btn-container", class: "mdc-touch-target-wrapper" }, h("crossmint-pay-button", { exportparts: "button", ref: (el) => (this.crossmintButton = el), class: "crossmint-btn", disabled: this.loading || this.disabled, projectId: this.projectId, collectionId: this.collectionId, mintTo: this.mintTo })), h("nk-dialog", { open: this.dialogOpen, dialogTitle: this.dialogTitle }, this.dialogMessage)));
  }
  static get is() { return "nk-drop-mint-crossmint-button"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() {
    return {
      "$": ["nk-drop-mint-crossmint-button.scss"]
    };
  }
  static get styleUrls() {
    return {
      "$": ["nk-drop-mint-crossmint-button.css"]
    };
  }
  static get properties() {
    return {
      "projectId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Crossmint Project Id"
        },
        "attribute": "project-id",
        "reflect": false
      },
      "collectionId": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": true,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Crossmint Collection Id"
        },
        "attribute": "collection-id",
        "reflect": false
      },
      "successTitle": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Title on the success modal"
        },
        "attribute": "success-title",
        "reflect": false,
        "defaultValue": "'Success'"
      },
      "successMessage": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": "Body message on the success modal"
        },
        "attribute": "success-message",
        "reflect": false,
        "defaultValue": "'Successfully minted an NFT'"
      }
    };
  }
  static get states() {
    return {
      "disabled": {},
      "loading": {},
      "mintTo": {},
      "saleActive": {},
      "presaleActive": {},
      "isOpen": {},
      "dialogOpen": {},
      "mintConfig": {}
    };
  }
  static get methods() {
    return {
      "openModal": {
        "complexType": {
          "signature": "() => Promise<void>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global",
              "id": "global::Promise"
            }
          },
          "return": "Promise<void>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      }
    };
  }
}
//# sourceMappingURL=nk-drop-mint-crossmint-button.js.map
