import { Component, Element, Fragment, h, Prop } from '@stencil/core';
import { __ } from '@wordpress/i18n';
import { formatAddress } from 'localized-address-format';
import { countryChoices } from '../../../functions/address';
import { zones } from '../../../functions/tax';
export class ScCustomerDetails {
  renderContent() {
    var _a, _b, _c, _d, _e, _f, _g, _h;
    if (this.loading) {
      return this.renderLoading();
    }
    if (!this.customer) {
      return this.renderEmpty();
    }
    return (h(Fragment, null,
      !!((_a = this === null || this === void 0 ? void 0 : this.customer) === null || _a === void 0 ? void 0 : _a.name) && (h("sc-stacked-list-row", { style: { '--columns': '3' }, mobileSize: 480 },
        h("div", null,
          h("strong", null, __('Billing Name', 'surecart'))),
        h("div", null, (_b = this.customer) === null || _b === void 0 ? void 0 : _b.name),
        h("div", null))),
      !!((_c = this === null || this === void 0 ? void 0 : this.customer) === null || _c === void 0 ? void 0 : _c.email) && (h("sc-stacked-list-row", { style: { '--columns': '3' }, mobileSize: 480 },
        h("div", null,
          h("strong", null, __('Billing Email', 'surecart'))),
        h("div", null, (_d = this.customer) === null || _d === void 0 ? void 0 : _d.email),
        h("div", null))),
      !!Object.keys(((_e = this === null || this === void 0 ? void 0 : this.customer) === null || _e === void 0 ? void 0 : _e.shipping_address) || {}).length && this.renderAddress(__('Shipping Address', 'surecart'), this.customer.shipping_address),
      !!Object.keys(((_f = this === null || this === void 0 ? void 0 : this.customer) === null || _f === void 0 ? void 0 : _f.billing_address) || {}).length && this.renderAddress(__('Billing Address', 'surecart'), this.customer.billing_address),
      !!((_g = this === null || this === void 0 ? void 0 : this.customer) === null || _g === void 0 ? void 0 : _g.phone) && (h("sc-stacked-list-row", { style: { '--columns': '3' }, mobileSize: 480 },
        h("div", null,
          h("strong", null, __('Phone', 'surecart'))),
        h("div", null, (_h = this.customer) === null || _h === void 0 ? void 0 : _h.phone),
        h("div", null))),
      (() => {
        var _a, _b, _c, _d;
        const { number_type, number } = ((_a = this.customer) === null || _a === void 0 ? void 0 : _a.tax_identifier) || {};
        if (!number || !number_type)
          return;
        const label = ((_b = zones === null || zones === void 0 ? void 0 : zones[number_type]) === null || _b === void 0 ? void 0 : _b.label) || __('Tax Id', 'surecart');
        const isInvalid = ((_d = (_c = this.customer) === null || _c === void 0 ? void 0 : _c.tax_identifier) === null || _d === void 0 ? void 0 : _d[`valid_${number_type}`]) === false;
        return (h("sc-stacked-list-row", { style: { '--columns': '3' }, mobileSize: 480 },
          h("div", null,
            h("strong", null, label)),
          h("div", null,
            number,
            " ",
            isInvalid && h("sc-tag", { type: "warning" }, __('Invalid', 'surecart'))),
          h("div", null)));
      })()));
  }
  renderAddress(label = 'Address', address) {
    var _a;
    const { name, line_1, line_2, city, state, postal_code, country } = address;
    const countryName = (_a = countryChoices.find(({ value }) => value === country)) === null || _a === void 0 ? void 0 : _a.label;
    return (h("sc-stacked-list-row", { style: { '--columns': '3' }, mobileSize: 480 },
      h("div", null,
        h("strong", null, label)),
      h("div", null, formatAddress({
        name,
        postalCountry: country,
        administrativeArea: state,
        locality: city,
        postalCode: postal_code,
        addressLines: [line_1, line_2],
      }).join('\n') +
        '\n' +
        countryName || country)));
  }
  renderEmpty() {
    return (h("sc-stacked-list-row", { "mobile-size": 0 },
      h("slot", { name: "empty" }, __('You are not a customer.', 'surecart'))));
  }
  renderLoading() {
    return (h("sc-stacked-list-row", { style: { '--columns': '2' }, "mobile-size": 0 },
      h("div", { style: { padding: '0.5em' } },
        h("sc-skeleton", { style: { width: '30%', marginBottom: '0.75em' } }),
        h("sc-skeleton", { style: { width: '20%', marginBottom: '0.75em' } }),
        h("sc-skeleton", { style: { width: '40%' } }))));
  }
  render() {
    var _a;
    return (h("sc-dashboard-module", { class: "customer-details", error: this.error },
      h("span", { slot: "heading" },
        this.heading || __('Billing Details', 'surecart'),
        ' ',
        !((_a = this === null || this === void 0 ? void 0 : this.customer) === null || _a === void 0 ? void 0 : _a.live_mode) && (h("sc-tag", { type: "warning", size: "small" }, __('Test', 'surecart')))),
      this.editLink && (h("sc-button", { type: "link", href: this.editLink, slot: "end" },
        h("sc-icon", { name: "edit-3", slot: "prefix" }),
        __('Update', 'surecart'))),
      h("sc-card", { "no-padding": true },
        h("sc-stacked-list", null, this.renderContent()))));
  }
  static get is() { return "sc-customer-details"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-customer-details.css"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-customer-details.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
    },
    "editLink": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "edit-link",
      "reflect": false
    },
    "customer": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Customer",
        "resolved": "Customer",
        "references": {
          "Customer": {
            "location": "import",
            "path": "../../../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "loading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "loading",
      "reflect": false
    },
    "error": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "error",
      "reflect": false
    }
  }; }
  static get elementRef() { return "el"; }
}
