import { Component, Element, Event, h, Prop, State } from "@stencil/core";
import * as gracely from "gracely";
import { Notice } from "smoothly";
import { Handler } from "../Handler";
import * as translation from "./translation";
export class CustomerWarning {
  componentWillLoad() {
    this.t = translation.create(this.element);
  }
  async retry() {
    this.notice.emit(Notice.execute(this.t("Retrying payment."), async () => {
      let result;
      const response = await Handler.client.customer.retryPayment();
      if (gracely.Error.is(response) || typeof response == "string" || response.errors > 0 || response.unpaid > 0)
        result = [false, this.t("Your payment was declined.")];
      else
        result = [true, this.t("Payment succeeded.")];
      return result;
    }));
  }
  render() {
    return [
      h("smoothly-icon", { name: "warning", size: "large" }),
      h("h3", null, this.t("Your payment was declined.")),
      h("p", null,
        h("b", null, this.t("Please confirm that there are sufficient funds in your account or update your payment method.")),
        h("br", null),
        this.t("To update your payment method, add a new card or change your default card by reordering your payment methods."),
        h("br", null),
        " ",
        this.t("Make sure that your preferred card is at the top.")),
      h("smoothly-submit", { prevent: true, color: "dark", onSubmit: () => {
          this.retry();
        } }, this.t("Retry Payment")),
    ];
  }
  static get is() { return "customer-warning"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "color": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "Color",
        "resolved": "\"danger\" | \"dark\" | \"default\" | \"light\" | \"medium\" | \"primary\" | \"secondary\" | \"success\" | \"tertiary\" | \"warning\"",
        "references": {
          "Color": {
            "location": "import",
            "path": "smoothly"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "color",
      "reflect": true
    }
  }; }
  static get states() { return {
    "t": {}
  }; }
  static get events() { return [{
      "method": "notice",
      "name": "notice",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Notice",
        "resolved": "Notice",
        "references": {
          "Notice": {
            "location": "import",
            "path": "smoothly"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
}
