import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import * as tidily from "tidily";
import * as translation from "./translation";
export class IntergiroBalanceAdd {
  constructor() {
    this.opened = false;
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  async submit(event) {
    const amount = tidily.parse(event.detail.price, "price", this.customer.currency);
    const order = {
      number: "Manual balance charge.",
      items: {
        name: "Manual balance charge.",
        price: amount,
      },
      currency: this.customer.currency,
      payment: { type: "customer", charge: "balance" },
      customer: this.customer.id,
    };
    this.addFunds.emit(order);
    this.opened = false;
    const form = document.getElementsByTagName("form")[0];
    form.reset();
  }
  render() {
    return [
      h("form", null,
        h("section", null,
          h("smoothly-display", { type: "price", value: this.customer.total, currency: this.customer.currency }),
          this.customer.balance.length > 0 && this.customer.total < 0 ? (h("smoothly-trigger", { style: { display: this.opened ? "" : "none" } },
            h("smoothly-icon", { toolTip: this.t("Equalize balance to zero."), name: "arrow-up-circle-outline", size: "small", color: "medium", fill: "clear" }))) : ([]),
          h("smoothly-icon", { toolTip: this.opened ? this.t("Cancel") : this.t("Top up balance"), color: this.opened ? "medium" : "default", fill: this.opened ? "clear" : "solid", name: this.opened ? "close" : "add-circle", onClick: () => (this.opened = !this.opened) })),
        h("section", { style: { display: this.opened ? "" : "none" } },
          h("smoothly-input", { name: "price", type: "price", currency: this.customer.currency }, this.t("Amount")),
          h("smoothly-submit", { prevent: true, onSubmit: (event) => this.submit(event) },
            h("smoothly-icon", { toolTip: this.t("Top up balance"), class: "add", color: "success", fill: "clear", name: "add-circle" })))),
    ];
  }
  static get is() { return "ig-balance-add"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "customer": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Customer",
        "resolved": "Customer",
        "references": {
          "Customer": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "t": {},
    "opened": {}
  }; }
  static get events() { return [{
      "method": "addFunds",
      "name": "addFunds",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Order.Creatable",
        "resolved": "Creatable",
        "references": {
          "Order": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
}
