import { h, } from "@stencil/core";
import state from "../../../store";
export class PayCard {
  constructor() {
    var _a, _b, _c, _d, _e, _f;
    this.stripeStyle = {
      base: {
        color: (state === null || state === void 0 ? void 0 : state.darkMode) ? "#FFFFFF" : "#000000",
        iconSize: "30px",
        iconColor: "#999999",
        lineHeight: "20px",
        fontFamily: '"Work Sans", sans-serif',
        fontSmoothing: "antialiased",
        fontSize: "18px",
        "::placeholder": {
          color: "#999999",
          iconColor: "#999999",
          fontWeight: "normal",
        },
      },
      invalid: {
        color: "#ee6274",
        iconColor: "#ee6274",
      },
    };
    this.stripeKey = ((_a = state === null || state === void 0 ? void 0 : state.job) === null || _a === void 0 ? void 0 : _a.isFranchise) && ((_d = (_c = (_b = state.config) === null || _b === void 0 ? void 0 : _b.franchise) === null || _c === void 0 ? void 0 : _c.stripe) === null || _d === void 0 ? void 0 : _d.key)
      ? state.config.franchise.stripe.key
      : (_f = (_e = state.config) === null || _e === void 0 ? void 0 : _e.stripe) === null || _f === void 0 ? void 0 : _f.key;
    this.card = undefined;
    this.error = undefined;
    this.isLoading = false;
  }
  async getCardToken() {
    this.error = null;
    this.isLoading = true;
    try {
      const res = await this.cardInputEl.getCardToken(this.card);
      this.isLoading = false;
      return res;
    }
    catch (e) {
      this.error = (e === null || e === void 0 ? void 0 : e.message) || null;
      this.isLoading = false;
      console.log(e);
      return false;
    }
  }
  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" })));
  }
  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,
        "defaultValue": "{\n    base: {\n      color: state?.darkMode ? \"#FFFFFF\" : \"#000000\",\n      iconSize: \"30px\",\n      iconColor: \"#999999\",\n      lineHeight: \"20px\",\n      fontFamily: '\"Work Sans\", sans-serif',\n      fontSmoothing: \"antialiased\",\n      fontSize: \"18px\",\n      \"::placeholder\": {\n        color: \"#999999\",\n        iconColor: \"#999999\",\n        fontWeight: \"normal\",\n      },\n    },\n    invalid: {\n      color: \"#ee6274\",\n      iconColor: \"#ee6274\",\n    },\n  }"
      },
      "stripeKey": {
        "type": "string",
        "mutable": false,
        "complexType": {
          "original": "string",
          "resolved": "string",
          "references": {}
        },
        "required": false,
        "optional": false,
        "docs": {
          "tags": [],
          "text": ""
        },
        "attribute": "stripe-key",
        "reflect": false,
        "defaultValue": "state?.job?.isFranchise && state.config?.franchise?.stripe?.key\n      ? state.config.franchise.stripe.key\n      : state.config?.stripe?.key"
      }
    };
  }
  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 methods() {
    return {
      "getCardToken": {
        "complexType": {
          "signature": "() => Promise<any>",
          "parameters": [],
          "references": {
            "Promise": {
              "location": "global"
            }
          },
          "return": "Promise<any>"
        },
        "docs": {
          "text": "",
          "tags": []
        }
      }
    };
  }
  static get elementRef() { return "payCardEl"; }
}
