import { Component, Element, Fragment, h, Prop, State } from '@stencil/core';
import { __ } from '@wordpress/i18n';
import { addQueryArgs } from '@wordpress/url';
import apiFetch from '../../../../functions/fetch';
import { onFirstVisible } from '../../../../functions/lazy';
import { intervalString } from '../../../../functions/price';
import { formatTaxDisplay } from '../../../../functions/tax';
export class ScOrder {
  /** Only fetch if visible */
  componentDidLoad() {
    onFirstVisible(this.el, () => {
      this.fetchOrder();
      this.fetchDownloads();
    });
  }
  async fetchOrder() {
    try {
      this.loading = true;
      await this.getOrder();
    }
    catch (e) {
      console.error(this.error);
      this.error = (e === null || e === void 0 ? void 0 : e.message) || __('Something went wrong', 'surecart');
    }
    finally {
      this.loading = false;
    }
  }
  async fetchDownloads() {
    try {
      this.busy = true;
      this.purchases = (await apiFetch({
        path: addQueryArgs(`surecart/v1/purchases`, {
          expand: ['product', 'product.downloads', 'download.media'],
          order_ids: [this.orderId],
          customer_ids: this.customerIds,
          downloadable: true,
        }),
      }));
    }
    catch (e) {
      console.error(this.error);
      this.error = (e === null || e === void 0 ? void 0 : e.message) || __('Something went wrong', 'surecart');
    }
    finally {
      this.busy = false;
    }
  }
  /** Get order */
  async getOrder() {
    this.order = (await apiFetch({
      path: addQueryArgs(`surecart/v1/orders/${this.orderId}`, {
        expand: [
          'checkout',
          'checkout.line_items',
          'line_item.price',
          'price.product',
          'checkout.manual_payment_method',
          'checkout.payment_method',
          'payment_method.card',
          'payment_method.payment_instrument',
          'payment_method.paypal_account',
          'payment_method.bank_account',
        ],
      }),
    }));
  }
  renderLoading() {
    return (h("sc-flex", { flexDirection: "column", style: { gap: '1em' } },
      h("sc-skeleton", { style: { width: '20%', display: 'inline-block' } }),
      h("sc-skeleton", { style: { width: '60%', display: 'inline-block' } }),
      h("sc-skeleton", { style: { width: '40%', display: 'inline-block' } })));
  }
  renderEmpty() {
    return h("sc-empty", { icon: "shopping-bag" }, __('Order not found.', 'surecart'));
  }
  renderContent() {
    var _a, _b, _c;
    if (this.loading) {
      return this.renderLoading();
    }
    if (!((_a = this.order) === null || _a === void 0 ? void 0 : _a.id)) {
      return this.renderEmpty();
    }
    const checkout = (_b = this.order) === null || _b === void 0 ? void 0 : _b.checkout;
    return (h(Fragment, null,
      (((_c = checkout === null || checkout === void 0 ? void 0 : checkout.line_items) === null || _c === void 0 ? void 0 : _c.data) || []).map(item => {
        var _a, _b, _c, _d, _e, _f;
        return (h("sc-product-line-item", { key: item.id, imageUrl: (_b = (_a = item === null || item === void 0 ? void 0 : item.price) === null || _a === void 0 ? void 0 : _a.product) === null || _b === void 0 ? void 0 : _b.image_url, name: (_d = (_c = item === null || item === void 0 ? void 0 : item.price) === null || _c === void 0 ? void 0 : _c.product) === null || _d === void 0 ? void 0 : _d.name, editable: false, removable: false, quantity: item.quantity, amount: item.subtotal_amount, currency: (_e = item === null || item === void 0 ? void 0 : item.price) === null || _e === void 0 ? void 0 : _e.currency, trialDurationDays: (_f = item === null || item === void 0 ? void 0 : item.price) === null || _f === void 0 ? void 0 : _f.trial_duration_days, interval: intervalString(item === null || item === void 0 ? void 0 : item.price) }));
      }),
      h("sc-divider", { style: { '--spacing': 'var(--sc-spacing-x-small)' } }),
      h("sc-line-item", null,
        h("span", { slot: "description" }, __('Subtotal', 'surecart')),
        h("sc-format-number", { slot: "price", style: {
            'font-weight': 'var(--sc-font-weight-semibold)',
            'color': 'var(--sc-color-gray-800)',
          }, type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: checkout === null || checkout === void 0 ? void 0 : checkout.subtotal_amount })),
      !!(checkout === null || checkout === void 0 ? void 0 : checkout.proration_amount) && (h("sc-line-item", null,
        h("span", { slot: "description" }, __('Proration', 'surecart')),
        h("sc-format-number", { slot: "price", style: {
            'font-weight': 'var(--sc-font-weight-semibold)',
            'color': 'var(--sc-color-gray-800)',
          }, type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: checkout === null || checkout === void 0 ? void 0 : checkout.proration_amount }))),
      !!(checkout === null || checkout === void 0 ? void 0 : checkout.applied_balance_amount) && (h("sc-line-item", null,
        h("span", { slot: "description" }, __('Applied Balance', 'surecart')),
        h("sc-format-number", { slot: "price", style: {
            'font-weight': 'var(--sc-font-weight-semibold)',
            'color': 'var(--sc-color-gray-800)',
          }, 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 === null || checkout === void 0 ? void 0 : checkout.discounts) && (h("sc-line-item", null,
        h("span", { slot: "description" }, __('Discount', 'surecart')),
        h("sc-format-number", { slot: "price", style: {
            'font-weight': 'var(--sc-font-weight-semibold)',
            'color': 'var(--sc-color-gray-800)',
          }, type: "currency", currency: checkout === null || checkout === void 0 ? void 0 : checkout.currency, value: checkout === null || checkout === void 0 ? void 0 : checkout.discounts }))),
      !!(checkout === null || checkout === void 0 ? void 0 : 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", style: {
            'font-weight': 'var(--sc-font-weight-semibold)',
            'color': 'var(--sc-color-gray-800)',
          }, 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': 'var(--sc-spacing-x-small)' } }),
      h("sc-line-item", { style: {
          'width': '100%',
          '--price-size': 'var(--sc-font-size-x-large)',
        } },
        h("span", { slot: "title" }, __('Total', 'surecart')),
        h("span", { slot: "price" },
          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 })),
        h("span", { slot: "currency" }, checkout === null || checkout === void 0 ? void 0 : checkout.currency))));
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g;
    const checkout = (_a = this === null || this === void 0 ? void 0 : this.order) === null || _a === void 0 ? void 0 : _a.checkout;
    const manualPaymentMethod = checkout === null || checkout === void 0 ? void 0 : checkout.manual_payment_method;
    return (h("sc-spacing", { style: { '--spacing': 'var(--sc-spacing-large)' } },
      h("sc-dashboard-module", { error: this.error },
        h("span", { slot: "heading" }, this.loading ? h("sc-skeleton", { style: { width: '120px' } }) : `#${(_b = this === null || this === void 0 ? void 0 : this.order) === null || _b === void 0 ? void 0 : _b.number}`),
        !this.loading && !(checkout === null || checkout === void 0 ? void 0 : checkout.live_mode) && (h("sc-tag", { type: "warning", slot: "end" }, __('Test Mode', 'surecart'))),
        !!(manualPaymentMethod === null || manualPaymentMethod === void 0 ? void 0 : manualPaymentMethod.name) && !!(manualPaymentMethod === null || manualPaymentMethod === void 0 ? void 0 : manualPaymentMethod.instructions) && (h("sc-order-manual-instructions", { manualPaymentTitle: manualPaymentMethod === null || manualPaymentMethod === void 0 ? void 0 : manualPaymentMethod.name, manualPaymentInstructions: manualPaymentMethod === null || manualPaymentMethod === void 0 ? void 0 : manualPaymentMethod.instructions })),
        h("sc-card", { "no-padding": !this.loading }, this.loading ? (this.renderLoading()) : (h(Fragment, null,
          h("sc-stacked-list", null,
            h("sc-stacked-list-row", { style: { '--columns': '2' } },
              h("div", null, __('Order Status', 'surecart')),
              h("sc-order-status-badge", { status: (_c = this === null || this === void 0 ? void 0 : this.order) === null || _c === void 0 ? void 0 : _c.status })),
            h("sc-stacked-list-row", { style: { '--columns': '2' } },
              h("div", null, __('Date', 'surecart')),
              h("sc-format-date", { type: "timestamp", date: (_d = this.order) === null || _d === void 0 ? void 0 : _d.created_at, month: "short", day: "numeric", year: "numeric" })),
            h("sc-stacked-list-row", { style: { '--columns': '2' } },
              h("div", null, __('Payment Method', 'surecart')),
              h("sc-payment-method", { paymentMethod: checkout === null || checkout === void 0 ? void 0 : checkout.payment_method }))))))),
      ((_e = this.order) === null || _e === void 0 ? void 0 : _e.statement_url) && (h("sc-button", { type: "primary", href: (_f = this.order) === null || _f === void 0 ? void 0 : _f.statement_url, target: "_blank" },
        h("sc-icon", { name: "inbox", slot: "prefix" }),
        __('Download Receipt/Invoice', 'surecart'))),
      !!((_g = this.purchases) === null || _g === void 0 ? void 0 : _g.length) && h("sc-purchase-downloads-list", { heading: __('Downloads', 'surecart'), purchases: this.purchases })));
  }
  static get is() { return "sc-order"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-order.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-order.css"]
  }; }
  static get properties() { return {
    "orderId": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "order-id",
      "reflect": false
    },
    "customerIds": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "string[]",
        "resolved": "string[]",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "heading": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "heading",
      "reflect": false
    }
  }; }
  static get states() { return {
    "order": {},
    "purchases": {},
    "loading": {},
    "busy": {},
    "error": {}
  }; }
  static get elementRef() { return "el"; }
}
