import { Component, Element, Event, Prop, State, h, } from "@stencil/core";
import state from "../../../store";
export class PayCard {
  constructor() {
    this.isLoading = false;
  }
  save(event) {
    console.log(event);
    this.error = null;
    this.isLoading = true;
    event.preventDefault();
    this.cardInputEl.getCardToken(this.card).then((result) => {
      this.isLoading = false;
      if (result.error) {
        this.error = result.error.message;
      }
      else {
        this.ftSubmitCard.emit({
          event,
          token: result.token,
        });
      }
    });
  }
  cancel(event) {
    this.ftCancel.emit({ event });
  }
  render() {
    return (h("div", { class: this.isLoading ? "pay-card-wrapper is-loading" : "pay-card-wrapper" },
      this.error ? h("floodteam-error", { message: this.error }) : null,
      h("fireenjin-input", { ref: (el) => (this.cardInputEl = el), lines: "none", stripeKey: this.stripeKey, stripeElements: {
          style: {
            base: {
              color: (state === null || state === void 0 ? void 0 : state.darkMode) ? "#ffffff" : "#000000",
              lineHeight: "18px",
              fontFamily: "PT Sans, Helvetica, sans-serif",
              fontSmoothing: "antialiased",
              fontSize: "16px",
              fontWeight: "bold",
              "::placeholder": {
                color: "#bebebe",
              },
              left: "15px",
            },
            invalid: {
              color: "#db3a5e",
              iconColor: "#db3a5e",
            },
          },
          iconStyle: "solid",
          placeholder: "Card Number",
        }, type: "card", name: "card" }),
      h("ion-grid", null,
        h("ion-row", null,
          h("ion-col", { size: "6" },
            h("ion-button", { color: "medium", onClick: (event) => this.cancel(event), fill: "clear" }, "back")),
          h("ion-col", { size: "6" },
            h("ion-button", { onClick: (event) => this.save(event) }, "Next"))))));
  }
  static get is() { return "floodteam-pay-card"; }
  static get originalStyleUrls() { return {
    "$": ["pay-card.css"]
  }; }
  static get styleUrls() { return {
    "$": ["pay-card.css"]
  }; }
  static get properties() { return {
    "stripeStyle": {
      "type": "any",
      "mutable": false,
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "stripe-style",
      "reflect": false
    },
    "stripeKey": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "stripe-key",
      "reflect": false
    }
  }; }
  static get states() { return {
    "card": {},
    "error": {},
    "isLoading": {}
  }; }
  static get events() { return [{
      "method": "ftSubmitCard",
      "name": "ftSubmitCard",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "ftCardError",
      "name": "ftCardError",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "ftCancel",
      "name": "ftCancel",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
  static get elementRef() { return "payCardEl"; }
}
//# sourceMappingURL=pay-card.js.map