import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';
import { countryChoices, hasState } from '../../../functions/address';
import { __ } from '@wordpress/i18n';
import { reportChildrenValidity } from '../../../functions/form-data';
export class ScCompactAddress {
  constructor() {
    /** 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('../address/countries.json').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)));
  }
  static get is() { return "sc-compact-address"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-compact-address.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-compact-address.css"]
  }; }
  static get properties() { return {
    "address": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "Partial<Address>",
        "resolved": "{ name?: string; line_1?: string; line_2?: string; city?: string; state?: string; postal_code?: string; country?: string; constructor?: Function; toString?: () => string; toLocaleString?: () => string; valueOf?: () => Object; hasOwnProperty?: (v: PropertyKey) => boolean; isPrototypeOf?: (v: Object) => boolean; propertyIsEnumerable?: (v: PropertyKey) => boolean; }",
        "references": {
          "Partial": {
            "location": "global"
          },
          "Address": {
            "location": "import",
            "path": "../../../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The address."
      },
      "defaultValue": "{\n    country: null,\n    city: null,\n    line_1: null,\n    line_2: null,\n    postal_code: null,\n    state: null,\n  }"
    },
    "names": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Partial<Address>",
        "resolved": "{ name?: string; line_1?: string; line_2?: string; city?: string; state?: string; postal_code?: string; country?: string; constructor?: Function; toString?: () => string; toLocaleString?: () => string; valueOf?: () => Object; hasOwnProperty?: (v: PropertyKey) => boolean; isPrototypeOf?: (v: Object) => boolean; propertyIsEnumerable?: (v: PropertyKey) => boolean; }",
        "references": {
          "Partial": {
            "location": "global"
          },
          "Address": {
            "location": "import",
            "path": "../../../types"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "{\n    country: 'shipping_country',\n    city: 'shipping_city',\n    line_1: 'shipping_line_1',\n    line_2: 'shipping_line_2',\n    postal_code: 'shipping_postal_code',\n    state: 'shipping_state',\n  }"
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Label for the address"
      },
      "attribute": "label",
      "reflect": false,
      "defaultValue": "__('Country or region', 'surecart')"
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Is this required?"
      },
      "attribute": "required",
      "reflect": false
    },
    "loading": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Is this loading"
      },
      "attribute": "loading",
      "reflect": false
    }
  }; }
  static get states() { return {
    "countryChoices": {},
    "regions": {},
    "showState": {},
    "showPostal": {}
  }; }
  static get events() { return [{
      "method": "scChangeAddress",
      "name": "scChangeAddress",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Address change event."
      },
      "complexType": {
        "original": "Partial<Address>",
        "resolved": "{ name?: string; line_1?: string; line_2?: string; city?: string; state?: string; postal_code?: string; country?: string; constructor?: Function; toString?: () => string; toLocaleString?: () => string; valueOf?: () => Object; hasOwnProperty?: (v: PropertyKey) => boolean; isPrototypeOf?: (v: Object) => boolean; propertyIsEnumerable?: (v: PropertyKey) => boolean; }",
        "references": {
          "Partial": {
            "location": "global"
          },
          "Address": {
            "location": "import",
            "path": "../../../types"
          }
        }
      }
    }, {
      "method": "scInputAddress",
      "name": "scInputAddress",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": "Address input event."
      },
      "complexType": {
        "original": "Partial<Address>",
        "resolved": "{ name?: string; line_1?: string; line_2?: string; city?: string; state?: string; postal_code?: string; country?: string; constructor?: Function; toString?: () => string; toLocaleString?: () => string; valueOf?: () => Object; hasOwnProperty?: (v: PropertyKey) => boolean; isPrototypeOf?: (v: Object) => boolean; propertyIsEnumerable?: (v: PropertyKey) => boolean; }",
        "references": {
          "Partial": {
            "location": "global"
          },
          "Address": {
            "location": "import",
            "path": "../../../types"
          }
        }
      }
    }]; }
  static get methods() { return {
    "reportValidity": {
      "complexType": {
        "signature": "() => Promise<boolean>",
        "parameters": [],
        "references": {
          "Promise": {
            "location": "global"
          }
        },
        "return": "Promise<boolean>"
      },
      "docs": {
        "text": "",
        "tags": []
      }
    }
  }; }
  static get elementRef() { return "el"; }
  static get watchers() { return [{
      "propName": "address",
      "methodName": "handleAddressChange"
    }]; }
}
