import { Component, h, Prop, State, Host, Watch } from '@stencil/core';
import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';
import apiFetch from '../../../../functions/fetch';
import { intervalString, translateRemainingPayments } from '../../../../functions/price';
import { formatTaxDisplay } from '../../../../functions/tax';
export class ScSubscriptionNextPayment {
  constructor() {
    this.loading = true;
  }
  componentWillLoad() {
    this.fetch();
  }
  handleSubscriptionChange() {
    this.fetch();
  }
  async fetch() {
    var _a, _b, _c;
    if (((_a = this.subscription) === null || _a === void 0 ? void 0 : _a.cancel_at_period_end) && this.subscription.current_period_end_at) {
      this.loading = false;
      return;
    }
    if (((_b = this.subscription) === null || _b === void 0 ? void 0 : _b.status) === 'canceled') {
      this.loading = false;
      return;
    }
    try {
      this.loading = true;
      this.period = (await apiFetch({
        method: 'PATCH',
        path: addQueryArgs(`surecart/v1/subscriptions/${(_c = this.subscription) === null || _c === void 0 ? void 0 : _c.id}/upcoming_period`, {
          skip_product_group_validation: true,
          expand: [
            'period.checkout',
            'checkout.line_items',
            'checkout.payment_method',
            'payment_method.card',
            'payment_method.payment_instrument',
            'payment_method.paypal_account',
            'payment_method.bank_account',
            'line_item.price',
            'price.product',
            'period.subscription',
          ],
        }),
        data: {
          purge_pending_update: false,
        },
      }));
    }
    catch (e) {
      console.error(e);
      this.error = e;
    }
    finally {
      this.loading = false;
    }
  }
  render() {
    var _a, _b, _c, _d;
    if (this.loading) {
      return (h("sc-toggle", { borderless: true, disabled: true },
        h("sc-flex", { slot: "summary", flexDirection: "column" },
          h("sc-skeleton", { style: { width: '200px' } }),
          h("sc-skeleton", { style: { width: '400px' } }),
          h("sc-skeleton", { style: { width: '300px' } }))));
    }
    const checkout = (_a = this === null || this === void 0 ? void 0 : this.period) === null || _a === void 0 ? void 0 : _a.checkout;
    if (!checkout)
      return (h("div", { style: { padding: 'var(--sc-spacing-medium)' } },
        h("sc-subscription-details", { slot: "summary", subscription: this.subscription })));
    return (h(Host, null,
      h("sc-toggle", { borderless: true, shady: true },
        h("span", { slot: "summary" },
          h("sc-subscription-details", { subscription: this.subscription },
            h("div", { style: { fontSize: 'var(--sc-font-size-small)' } },
              __('Your next payment is', 'surecart'),
              ' ',
              h("strong", null,
                h("sc-format-number", { type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: checkout === null || checkout === void 0 ? void 0 : checkout.amount_due })),
              ' ',
              !!((_b = this.subscription) === null || _b === void 0 ? void 0 : _b.finite) && ' - ' + translateRemainingPayments((_c = this.subscription) === null || _c === void 0 ? void 0 : _c.remaining_period_count)))),
        h("sc-card", { noPadding: true, borderless: true }, (_d = checkout === null || checkout === void 0 ? void 0 : checkout.line_items) === null || _d === void 0 ? void 0 :
          _d.data.map(item => {
            var _a, _b, _c, _d, _e;
            return (h("sc-product-line-item", { imageUrl: (_b = (_a = item.price) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.image_url, name: (_d = (_c = item.price) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.name, editable: false, removable: false, quantity: item === null || item === void 0 ? void 0 : item.quantity, amount: item === null || item === void 0 ? void 0 : item.total_amount, currency: (_e = item === null || item === void 0 ? void 0 : item.price) === null || _e === void 0 ? void 0 : _e.currency, interval: intervalString(item === null || item === void 0 ? void 0 : item.price) }));
          }),
          h("sc-line-item", null,
            h("span", { slot: "description" }, __('Subtotal', 'surecart')),
            h("sc-format-number", { slot: "price", type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: checkout === null || checkout === void 0 ? void 0 : checkout.subtotal_amount })),
          !!checkout.proration_amount && (h("sc-line-item", null,
            h("span", { slot: "description" }, __('Proration Credit', 'surecart')),
            h("sc-format-number", { slot: "price", type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: -(checkout === null || checkout === void 0 ? void 0 : checkout.proration_amount) }))),
          !!checkout.applied_balance_amount && (h("sc-line-item", null,
            h("span", { slot: "description" }, __('Applied Balance', 'surecart')),
            h("sc-format-number", { slot: "price", type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: -(checkout === null || checkout === void 0 ? void 0 : checkout.applied_balance_amount) }))),
          !!checkout.trial_amount && (h("sc-line-item", null,
            h("span", { slot: "description" }, __('Free Trial', 'surecart')),
            h("sc-format-number", { slot: "price", type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: checkout === null || checkout === void 0 ? void 0 : checkout.trial_amount }))),
          !!(checkout === null || checkout === void 0 ? void 0 : checkout.discount_amount) && (h("sc-line-item", null,
            h("span", { slot: "description" }, __('Discounts', 'surecart')),
            h("sc-format-number", { slot: "price", type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: checkout === null || checkout === void 0 ? void 0 : checkout.discount_amount }))),
          !!checkout.tax_amount && (h("sc-line-item", null,
            h("span", { slot: "description" }, formatTaxDisplay(checkout === null || checkout === void 0 ? void 0 : checkout.tax_label)),
            h("sc-format-number", { slot: "price", type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: checkout === null || checkout === void 0 ? void 0 : checkout.tax_amount }))),
          h("sc-divider", { style: { '--spacing': '0' } }),
          h("sc-line-item", null,
            h("span", { slot: "description" }, __('Payment', 'surecart')),
            h("a", { href: addQueryArgs(window.location.href, {
                action: 'update_payment_method',
              }), slot: "price-description" },
              h("sc-flex", { "justify-content": "flex-start", "align-items": "center", style: { '--spacing': '0.5em' } },
                h("sc-payment-method", { paymentMethod: checkout === null || checkout === void 0 ? void 0 : checkout.payment_method }),
                h("sc-icon", { name: "edit-3" })))),
          h("sc-line-item", { style: { '--price-size': 'var(--sc-font-size-x-large)' } },
            h("span", { slot: "title" }, __('Total Due', 'surecart')),
            h("sc-format-number", { slot: "price", type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: checkout === null || checkout === void 0 ? void 0 : checkout.amount_due }),
            h("span", { slot: "currency" }, checkout.currency))))));
  }
  static get is() { return "sc-subscription-next-payment"; }
  static get encapsulation() { return "shadow"; }
  static get properties() { return {
    "subscription": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Subscription",
        "resolved": "Subscription",
        "references": {
          "Subscription": {
            "location": "import",
            "path": "../../../../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    }
  }; }
  static get states() { return {
    "period": {},
    "loading": {},
    "error": {},
    "details": {}
  }; }
  static get watchers() { return [{
      "propName": "subscription",
      "methodName": "handleSubscriptionChange"
    }]; }
}
