import { Component, h, Prop, State } from '@stencil/core';
import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';
import { intervalString } from '../../../../functions/price';
export class ScSubscriptionAdHocConfirm {
  constructor() {
    this.busy = false;
  }
  async handleSubmit(e) {
    const { ad_hoc_amount } = await e.target.getFormJson();
    this.busy = true;
    return window.location.assign(addQueryArgs(window.location.href, {
      action: 'confirm',
      ad_hoc_amount,
    }));
  }
  render() {
    return (h("sc-dashboard-module", { heading: this.heading || __('Enter An Amount', 'surecart'), class: "subscription-switch" },
      h("sc-card", null,
        h("sc-form", { onScSubmit: e => this.handleSubmit(e) },
          h("sc-price-input", { label: "Amount", name: "ad_hoc_amount", autofocus: true, required: true },
            h("span", { slot: "suffix", style: { opacity: '0.75' } }, intervalString(this.price))),
          h("sc-button", { type: "primary", full: true, submit: true, loading: this.busy },
            __('Next', 'surecart'),
            " ",
            h("sc-icon", { name: "arrow-right", slot: "suffix" })))),
      this.busy && h("sc-block-ui", { style: { zIndex: '9' } })));
  }
  static get is() { return "sc-subscription-ad-hoc-confirm"; }
  static get originalStyleUrls() { return {
    "$": ["sc-subscription-ad-hoc-confirm.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-subscription-ad-hoc-confirm.css"]
  }; }
  static get properties() { return {
    "heading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "heading",
      "reflect": false
    },
    "price": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Price",
        "resolved": "Price",
        "references": {
          "Price": {
            "location": "import",
            "path": "../../../../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "busy": {}
  }; }
}
