import { proxyCustomElement, HTMLElement, createEvent, h } from '@stencil/core/internal/client';
import { c as countryChoices, b as hasState } from './address.js';
import { _ as __ } from './default-i18n.js';
import './index2.js';
import { r as reportChildrenValidity } from './form-data.js';
import { d as defineCustomElement$b } from './sc-block-ui2.js';
import { d as defineCustomElement$a } from './dropdown.js';
import { d as defineCustomElement$9 } from './sc-form-control2.js';
import { d as defineCustomElement$8 } from './sc-icon2.js';
import { d as defineCustomElement$7 } from './sc-input2.js';
import { d as defineCustomElement$6 } from './sc-menu2.js';
import { d as defineCustomElement$5 } from './sc-menu-item2.js';
import { d as defineCustomElement$4 } from './sc-menu-label2.js';
import { d as defineCustomElement$3 } from './sc-select2.js';
import { d as defineCustomElement$2 } from './sc-spinner2.js';
import { d as defineCustomElement$1 } from './sc-tooltip2.js';

const scCompactAddressCss = ":host{display:block}.sc-address{display:block;position:relative}.sc-address [hidden]{display:none}.sc-address--loading{min-height:70px}.sc-address--loading sc-skeleton{display:block;margin-bottom:1em}.sc-address__control{display:block}.sc-address__control>*{margin-bottom:-1px}.sc-address__columns{display:flex;flex-direction:row;align-items:center;flex-wrap:wrap;justify-content:space-between}.sc-address__columns>*{flex:1;width:50%;margin-left:-1px}.sc-address__columns>*:first-child{margin-left:0}";

const ScCompactAddress = /*@__PURE__*/ proxyCustomElement(class extends HTMLElement {
  constructor() {
    super();
    this.__registerHost();
    this.__attachShadow();
    this.scChangeAddress = createEvent(this, "scChangeAddress", 7);
    this.scInputAddress = createEvent(this, "scInputAddress", 7);
    /** The address. */
    this.address = {
      country: null,
      city: null,
      line_1: null,
      line_2: null,
      postal_code: null,
      state: null,
    };
    this.names = {
      country: 'shipping_country',
      city: 'shipping_city',
      line_1: 'shipping_line_1',
      line_2: 'shipping_line_2',
      postal_code: 'shipping_postal_code',
      state: 'shipping_state',
    };
    /** Label for the address */
    this.label = __('Country or region', 'surecart');
    /** Holds our country choices. */
    this.countryChoices = countryChoices;
  }
  /** When the state changes, we want to update city and postal fields. */
  handleAddressChange() {
    if (!this.address.country)
      return;
    this.setRegions();
    this.showState = ['US', 'CA'].includes(this.address.country);
    this.showPostal = ['US'].includes(this.address.country);
    this.scChangeAddress.emit(this.address);
    this.scInputAddress.emit(this.address);
  }
  updateAddress(address) {
    this.address = { ...this.address, ...address };
  }
  handleAddressInput(address) {
    this.scInputAddress.emit({ ...this.address, ...address });
  }
  clearAddress() {
    this.address = {
      country: null,
      line_1: null,
      line_2: null,
      city: null,
      postal_code: null,
      state: null,
    };
  }
  /** Set the regions based on the country. */
  setRegions() {
    if (hasState(this.address.country)) {
      import('./countries.js').then(module => {
        this.regions = module === null || module === void 0 ? void 0 : module[this.address.country];
      });
    }
    else {
      this.regions = [];
    }
  }
  componentWillLoad() {
    var _a;
    this.handleAddressChange();
    const country = (_a = this.countryChoices.find(country => country.value === this.address.country)) === null || _a === void 0 ? void 0 : _a.value;
    if (country) {
      this.updateAddress({ country });
    }
  }
  async reportValidity() {
    return reportChildrenValidity(this.el);
  }
  render() {
    var _a, _b, _c;
    return (h("div", { class: "sc-address" }, h("sc-form-control", { label: this.label, class: "sc-address__control", part: "control", required: this.required }, h("sc-select", { value: (_a = this.address) === null || _a === void 0 ? void 0 : _a.country, onScChange: (e) => {
        this.clearAddress();
        this.updateAddress({ country: e.target.value || null });
      }, choices: this.countryChoices, autocomplete: 'country-name', placeholder: __('Select Your Country', 'surecart'), name: this.names.country, search: true, unselect: false, "squared-bottom": this.showState || this.showPostal, required: this.required }), h("div", { class: "sc-address__columns" }, this.showState && (h("sc-select", { placeholder: this.address.country === 'US' ? __('State', 'surecart') : __('Province/Region', 'surecart'), name: this.names.state, autocomplete: 'address-level1', value: (_b = this === null || this === void 0 ? void 0 : this.address) === null || _b === void 0 ? void 0 : _b.state, onScChange: (e) => this.updateAddress({ state: e.target.value || null }), choices: this.regions, required: this.required, search: true, "squared-top": true, unselect: false, "squared-right": this.showPostal })), this.showPostal && (h("sc-input", { placeholder: __('Postal Code/Zip', 'surecart'), name: this.names.postal_code, onScChange: (e) => this.updateAddress({ postal_code: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ name: e.target.value || null }), autocomplete: 'postal-code', required: this.required, value: (_c = this === null || this === void 0 ? void 0 : this.address) === null || _c === void 0 ? void 0 : _c.postal_code, "squared-top": true, maxlength: 5, "squared-left": this.showState })))), this.loading && h("sc-block-ui", null)));
  }
  get el() { return this; }
  static get watchers() { return {
    "address": ["handleAddressChange"]
  }; }
  static get style() { return scCompactAddressCss; }
}, [1, "sc-compact-address", {
    "address": [1040],
    "names": [16],
    "label": [1],
    "required": [4],
    "loading": [4],
    "countryChoices": [32],
    "regions": [32],
    "showState": [32],
    "showPostal": [32],
    "reportValidity": [64]
  }]);
function defineCustomElement() {
  if (typeof customElements === "undefined") {
    return;
  }
  const components = ["sc-compact-address", "sc-block-ui", "sc-dropdown", "sc-form-control", "sc-icon", "sc-input", "sc-menu", "sc-menu-item", "sc-menu-label", "sc-select", "sc-spinner", "sc-tooltip"];
  components.forEach(tagName => { switch (tagName) {
    case "sc-compact-address":
      if (!customElements.get(tagName)) {
        customElements.define(tagName, ScCompactAddress);
      }
      break;
    case "sc-block-ui":
      if (!customElements.get(tagName)) {
        defineCustomElement$b();
      }
      break;
    case "sc-dropdown":
      if (!customElements.get(tagName)) {
        defineCustomElement$a();
      }
      break;
    case "sc-form-control":
      if (!customElements.get(tagName)) {
        defineCustomElement$9();
      }
      break;
    case "sc-icon":
      if (!customElements.get(tagName)) {
        defineCustomElement$8();
      }
      break;
    case "sc-input":
      if (!customElements.get(tagName)) {
        defineCustomElement$7();
      }
      break;
    case "sc-menu":
      if (!customElements.get(tagName)) {
        defineCustomElement$6();
      }
      break;
    case "sc-menu-item":
      if (!customElements.get(tagName)) {
        defineCustomElement$5();
      }
      break;
    case "sc-menu-label":
      if (!customElements.get(tagName)) {
        defineCustomElement$4();
      }
      break;
    case "sc-select":
      if (!customElements.get(tagName)) {
        defineCustomElement$3();
      }
      break;
    case "sc-spinner":
      if (!customElements.get(tagName)) {
        defineCustomElement$2();
      }
      break;
    case "sc-tooltip":
      if (!customElements.get(tagName)) {
        defineCustomElement$1();
      }
      break;
  } });
}
defineCustomElement();

export { ScCompactAddress as S, defineCustomElement as d };
