import { Component, Event, h, Host, Prop, State } from "@stencil/core";
import { Connection } from "@payfunc/model-base";
export class CustomerMethods {
  componentWillLoad() {
    var _a;
    this.apiKey = (_a = Connection.key) !== null && _a !== void 0 ? _a : "";
    Connection.keyChanged.push(key => (this.apiKey = key !== null && key !== void 0 ? key : ""));
  }
  onUpdate(e) {
    this.update.emit(e.detail);
  }
  getCustomCssVariables() {
    var _a, _b, _c, _d, _e;
    const result = {};
    if (this.cosmetic && (typeof this.cosmetic == "object" || ((_a = this.cosmetic) === null || _a === void 0 ? void 0 : _a.length) > 0)) {
      const cosmetic = typeof this.cosmetic == "string" && this.cosmetic.length > 0 ? JSON.parse(this.cosmetic) : this.cosmetic;
      Object.entries({
        "--smoothly-font-family": (_b = cosmetic === null || cosmetic === void 0 ? void 0 : cosmetic.fontFamily) !== null && _b !== void 0 ? _b : cosmetic === null || cosmetic === void 0 ? void 0 : cosmetic.font_family,
        "--smoothly-primary-color": (_c = cosmetic === null || cosmetic === void 0 ? void 0 : cosmetic.header) === null || _c === void 0 ? void 0 : _c.background,
        "--smoothly-success-color": (_d = cosmetic === null || cosmetic === void 0 ? void 0 : cosmetic.success) === null || _d === void 0 ? void 0 : _d.background,
        "--smoothly-success-contrast": (_e = cosmetic === null || cosmetic === void 0 ? void 0 : cosmetic.success) === null || _e === void 0 ? void 0 : _e.color,
      }).forEach(([key, value]) => {
        value && (result[key] = value);
      });
    }
    return result;
  }
  render() {
    return (h(Host, { style: this.getCustomCssVariables() },
      (this.customer.status == "suspended" || this.customer.status == "pending") && (h("customer-warning", { color: "warning" })),
      h("ig-payment-methods", { methods: this.methods, addable: true, deletable: true, mode: "card", "api-key": this.apiKey, customer: this.customer, onDelete: (e) => this.onUpdate(e), onUpdate: (e) => this.onUpdate(e) })));
  }
  static get is() { return "customer-methods"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "methods": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Customer.Method[]",
        "resolved": "Card[]",
        "references": {
          "Customer": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "customer": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Customer",
        "resolved": "Customer",
        "references": {
          "Customer": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "component": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "\"app\" | \"method\"",
        "resolved": "\"app\" | \"method\" | undefined",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "component",
      "reflect": true
    },
    "cosmetic": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "| string\n\t\t| {\n\t\t\t\tfontFamily?: string\n\t\t\t\theader?: { background?: string; color?: string }\n\t\t\t\tbody?: { background?: string; color?: string }\n\t\t\t\tsuccess?: { background?: string; color?: string }\n\t\t  }",
        "resolved": "string | undefined | { fontFamily?: string | undefined; header?: { background?: string | undefined; color?: string | undefined; } | undefined; body?: { background?: string | undefined; color?: string | undefined; } | undefined; success?: { background?: string | undefined; color?: string | undefined; } | undefined; }",
        "references": {}
      },
      "required": false,
      "optional": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "cosmetic",
      "reflect": false
    }
  }; }
  static get states() { return {
    "apiKey": {}
  }; }
  static get events() { return [{
      "method": "update",
      "name": "update",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "add",
      "name": "add",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }]; }
}
