import { Component, Element, Event, h, Method, Prop, State, Watch } from '@stencil/core';
import { __ } from '@wordpress/i18n';
import { hasState, hasCity, hasPostal, countryChoices } from '../../../functions/address';
import { reportChildrenValidity } from '../../../functions/form-data';
export class ScAddress {
  constructor() {
    /** The address. */
    this.address = {
      country: null,
      city: null,
      line_1: null,
      line_2: null,
      postal_code: null,
      state: null,
    };
    this.names = {
      name: 'shipping_name',
      country: 'shipping_country',
      city: 'shipping_city',
      line_1: 'shipping_line_1',
      line_2: 'shipping_line_2',
      postal_code: 'shipping_postal_code',
      state: 'shipping_state',
    };
    this.placeholders = {
      name: __('Name or Company Name', 'surecart'),
      country: __('Country', 'surecart'),
      city: __('City', 'surecart'),
      line_1: __('Address', 'surecart'),
      line_2: __('Address Line 2', 'surecart'),
      postal_code: __('Postal Code/Zip', 'surecart'),
      state: __('State/Province/Region', 'surecart'),
    };
    /** Is this loading?  */
    this.loading = false;
    /** Is this required? */
    this.required = true;
    /** Should we show the city field? */
    this.showCity = true;
    /** Should we show the postal field? */
    this.showPostal = true;
    /** 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.showPostal = hasPostal(this.address.country);
    this.showCity = hasCity(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,
      city: null,
      line_1: null,
      line_2: null,
      postal_code: null,
      state: null,
    };
  }
  /** Set the regions based on the country. */
  setRegions() {
    if (hasState(this.address.country)) {
      import('./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) || 'US';
    this.updateAddress({ country });
  }
  async reportValidity() {
    return reportChildrenValidity(this.el);
  }
  render() {
    var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k, _l, _m;
    return (h("div", { class: "sc-address" },
      h("sc-form-control", { label: this.label, class: "sc-address__control", part: "control", required: this.required },
        this.showName && (h("sc-input", { value: (_a = this === null || this === void 0 ? void 0 : this.address) === null || _a === void 0 ? void 0 : _a.name, onScChange: (e) => this.updateAddress({ name: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ name: e.target.value || null }), autocomplete: "street-address", placeholder: this.placeholders.name, name: this.names.name, "squared-bottom": true, disabled: this.disabled, required: this.required })),
        h("sc-select", { value: (_b = this.address) === null || _b === void 0 ? void 0 : _b.country, onScChange: (e) => {
            this.clearAddress();
            this.updateAddress({ country: e.target.value });
          }, choices: this.countryChoices, autocomplete: 'country-name', placeholder: this.placeholders.country, name: this.names.country, search: true, unselect: false, "squared-bottom": true, squared: this.showName, disabled: this.disabled, required: this.required }),
        h("sc-input", { value: (_c = this === null || this === void 0 ? void 0 : this.address) === null || _c === void 0 ? void 0 : _c.line_1, onScChange: (e) => this.updateAddress({ line_1: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ line_1: e.target.value || null }), autocomplete: "street-address", placeholder: this.placeholders.line_1, name: this.names.line_1, squared: true, disabled: this.disabled, required: this.required }),
        this.showLine2 && (h("sc-input", { value: (_d = this === null || this === void 0 ? void 0 : this.address) === null || _d === void 0 ? void 0 : _d.line_2, onScChange: (e) => this.updateAddress({ line_2: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ line_2: e.target.value || null }), autocomplete: "street-address", placeholder: this.placeholders.line_2, name: this.names.line_2, squared: true, disabled: this.disabled, required: this.required })),
        h("div", { class: "sc-address__columns" },
          this.showCity && (h("sc-input", { placeholder: this.placeholders.city, name: this.names.city, value: (_e = this === null || this === void 0 ? void 0 : this.address) === null || _e === void 0 ? void 0 : _e.city, onScChange: (e) => this.updateAddress({ city: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ city: e.target.value || null }), required: this.required, squared: !!((_f = this === null || this === void 0 ? void 0 : this.regions) === null || _f === void 0 ? void 0 : _f.length), style: { marginRight: this.showPostal ? '-1px' : '0' }, "squared-top": true, disabled: this.disabled, "squared-right": this.showPostal })),
          this.showPostal && (h("sc-input", { placeholder: this.placeholders.postal_code, name: this.names.postal_code, onScChange: (e) => this.updateAddress({ postal_code: e.target.value || null }), onScInput: (e) => this.handleAddressInput({ postal_code: e.target.value || null }), autocomplete: 'postal-code', required: this.required, value: (_g = this === null || this === void 0 ? void 0 : this.address) === null || _g === void 0 ? void 0 : _g.postal_code, squared: !!((_h = this === null || this === void 0 ? void 0 : this.regions) === null || _h === void 0 ? void 0 : _h.length), "squared-top": true, disabled: this.disabled, maxlength: ((_j = this.address) === null || _j === void 0 ? void 0 : _j.country) === 'US' ? 5 : null, "squared-left": this.showCity }))),
        !!((_k = this === null || this === void 0 ? void 0 : this.regions) === null || _k === void 0 ? void 0 : _k.length) && !!((_l = this === null || this === void 0 ? void 0 : this.address) === null || _l === void 0 ? void 0 : _l.country) && (h("sc-select", { placeholder: this.placeholders.state, name: this.names.state, autocomplete: 'address-level1', value: (_m = this === null || this === void 0 ? void 0 : this.address) === null || _m === void 0 ? void 0 : _m.state, onScChange: (e) => this.updateAddress({ state: e.target.value || null }), choices: this.regions, required: this.required, disabled: this.disabled, search: true, "squared-top": true }))),
      this.loading && h("sc-block-ui", null)));
  }
  static get is() { return "sc-address"; }
  static get encapsulation() { return "shadow"; }
  static get originalStyleUrls() { return {
    "$": ["sc-address.scss"]
  }; }
  static get styleUrls() { return {
    "$": ["sc-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    name: 'shipping_name',\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  }"
    },
    "placeholders": {
      "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    name: __('Name or Company Name', 'surecart'),\n    country: __('Country', 'surecart'),\n    city: __('City', 'surecart'),\n    line_1: __('Address', 'surecart'),\n    line_2: __('Address Line 2', 'surecart'),\n    postal_code: __('Postal Code/Zip', 'surecart'),\n    state: __('State/Province/Region', 'surecart'),\n  }"
    },
    "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,
      "defaultValue": "false"
    },
    "disabled": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Is this disabled?"
      },
      "attribute": "disabled",
      "reflect": false
    },
    "label": {
      "type": "string",
      "mutable": false,
      "complexType": {
        "original": "string",
        "resolved": "string",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "The label for the field."
      },
      "attribute": "label",
      "reflect": false
    },
    "showName": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Should we show name field?"
      },
      "attribute": "show-name",
      "reflect": false
    },
    "showLine2": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Should we show name field?"
      },
      "attribute": "show-line-2",
      "reflect": false
    },
    "required": {
      "type": "boolean",
      "mutable": false,
      "complexType": {
        "original": "boolean",
        "resolved": "boolean",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": "Is this required?"
      },
      "attribute": "required",
      "reflect": true,
      "defaultValue": "true"
    }
  }; }
  static get states() { return {
    "showCity": {},
    "showPostal": {},
    "regions": {},
    "countryChoices": {}
  }; }
  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 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"
          }
        }
      }
    }]; }
  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"
    }]; }
}
