import { Component, Element, Event, h, Listen, Prop, State } from "@stencil/core";
import * as isoly from "isoly";
import { Notice } from "smoothly";
import { Address } from "@payfunc/model";
import * as translation from "./translation";
export class PayfuncAddressInput {
  constructor() {
    var _a, _b;
    this.types = [];
    this.mode = "edit";
    this.type = this.types[0];
    this.selected = (_b = (_a = this.address) === null || _a === void 0 ? void 0 : _a.countryCode) !== null && _b !== void 0 ? _b : "SE";
    this.countries = ["SE", "FI", "DE", "DK", "NO"];
    this.state = Address.DE.is(this.address) ? this.address.state : "";
    this.adding = false;
  }
  get address() {
    return typeof this.value == "string" ? JSON.parse(this.value) : this.value;
  }
  componentWillLoad() {
    this.t = translation.create(this.element);
    if (!this.value) {
      this.value = Address.create("SE");
      this.adding = true;
    }
  }
  onTrigger() {
    if (this.adding)
      this.close.emit();
    else
      this.edit.emit(this.address);
  }
  onSelectionChanged(e) {
    if (e.detail.identifier == "types")
      this.type = e.detail.value;
    else if (e.detail.identifier == "countries")
      this.value = Address.create(e.detail.value);
    else if (e.detail.identifier == "states")
      this.state = e.detail.value;
  }
  onSubmit(e) {
    e.stopPropagation();
    const result = Object.assign(Object.assign({}, e.detail), { countryCode: e.detail.country
        ? isoly.CountryCode.Name.parse(e.detail.country.toLowerCase())
        : this.value.countryCode });
    if (result.countryCode == "DE")
      result.state = this.state;
    if ((Address.is(result) && !Object.values(result).some(x => x == "")) || result.countryCode == "") {
      this.adding ? this.create.emit({ type: this.type, value: result }) : this.edit.emit(result);
    }
    else
      this.notice.emit(Notice.failed(this.t("Please enter a valid address.")));
  }
  toUpperCase(value) {
    return value.charAt(0).toUpperCase() + value.slice(1);
  }
  render() {
    var _a;
    const t = this.t;
    let inputFields = [];
    if (this.address.countryCode == "")
      inputFields = [
        h("smoothly-input", { type: "text", name: "address1", id: this.adding ? "add" : "", value: this.address.address1 }, "Address 1"),
        h("smoothly-input", { type: "text", name: "address2", value: this.address.address2 }, "Address 2"),
        h("smoothly-input", { type: "text", name: "address3", value: this.address.address3 }, "Address 3"),
      ];
    else
      inputFields = [
        h("smoothly-input", { type: "text", name: "street", id: this.adding ? "add" : "", value: this.address.street }, t("Street")),
        h("smoothly-input", { type: "postal-code", name: "zipCode", value: this.address.zipCode }, t("Zip code")),
        h("smoothly-input", { type: "text", name: "city", value: this.address.city }, t("City")),
        this.address.countryCode == "DE" ? (h("smoothly-select", { id: "states", identifier: "states", background: "transparent" },
          h("option", { value: (_a = this.address.state) !== null && _a !== void 0 ? _a : "", selected: true }, this.address.state == "" || !this.address.state ? "State" : this.address.state),
          Address.DE.State.types.map(option => (h("option", { value: option }, option))))) : ([]),
        !this.adding ? (h("smoothly-input", { type: "text", name: "country", value: this.adding ? "" : isoly.CountryCode.Name.from("en", this.address.countryCode) }, t("Country"))) : ([]),
      ];
    return [
      h("form", null,
        this.adding
          ? [
            h("smoothly-select", { id: "types", identifier: "types", background: "transparent" }, this.types.map(option => this.type == option ? (h("option", { value: option, selected: true }, this.toUpperCase(t(option)))) : (h("option", { value: option }, this.toUpperCase(t(option)))))),
            h("smoothly-select", { id: "countries", identifier: "countries", background: "transparent" },
              this.countries.map(country => (h("option", { value: country, selected: this.selected == country }, country))),
              h("option", { value: "" }, "Other")),
          ]
          : [],
        inputFields,
        h("div", null,
          h("smoothly-submit", { color: "primary", fill: "clear", prevent: true, onSubmit: (e) => this.onSubmit(e) },
            h("smoothly-icon", { name: "checkmark-circle", toolTip: t("Save"), color: "success", fill: "clear", size: "small" })),
          h("smoothly-trigger", { color: "primary", fill: "clear" },
            h("smoothly-icon", { name: "close-circle", toolTip: t("Cancel"), color: "light", fill: "clear", size: "small" })))),
    ];
  }
  static get is() { return "payfunc-address-input"; }
  static get encapsulation() { return "scoped"; }
  static get originalStyleUrls() { return {
    "$": ["style.css"]
  }; }
  static get styleUrls() { return {
    "$": ["style.css"]
  }; }
  static get properties() { return {
    "value": {
      "type": "unknown",
      "mutable": true,
      "complexType": {
        "original": "Address",
        "resolved": "DE | DK | FI | General | NO | SE",
        "references": {
          "Address": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      }
    },
    "types": {
      "type": "unknown",
      "mutable": false,
      "complexType": {
        "original": "Addresses.Type[]",
        "resolved": "Type[]",
        "references": {
          "Addresses": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "defaultValue": "[]"
    },
    "mode": {
      "type": "string",
      "mutable": true,
      "complexType": {
        "original": "\"edit\" | \"add\"",
        "resolved": "\"add\" | \"edit\"",
        "references": {}
      },
      "required": false,
      "optional": false,
      "docs": {
        "tags": [],
        "text": ""
      },
      "attribute": "mode",
      "reflect": false,
      "defaultValue": "\"edit\""
    }
  }; }
  static get states() { return {
    "t": {},
    "type": {}
  }; }
  static get events() { return [{
      "method": "edit",
      "name": "edit",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Address",
        "resolved": "DE | DK | FI | General | NO | SE",
        "references": {
          "Address": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }, {
      "method": "create",
      "name": "create",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "{ type: string; value: Address }",
        "resolved": "{ type: string; value: Address; }",
        "references": {
          "Address": {
            "location": "import",
            "path": "@payfunc/model"
          }
        }
      }
    }, {
      "method": "close",
      "name": "close",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "any",
        "resolved": "any",
        "references": {}
      }
    }, {
      "method": "notice",
      "name": "notice",
      "bubbles": true,
      "cancelable": true,
      "composed": true,
      "docs": {
        "tags": [],
        "text": ""
      },
      "complexType": {
        "original": "Notice",
        "resolved": "Notice",
        "references": {
          "Notice": {
            "location": "import",
            "path": "smoothly"
          }
        }
      }
    }]; }
  static get elementRef() { return "element"; }
  static get listeners() { return [{
      "name": "trigger",
      "method": "onTrigger",
      "target": undefined,
      "capture": false,
      "passive": false
    }, {
      "name": "selectionChanged",
      "method": "onSelectionChanged",
      "target": undefined,
      "capture": false,
      "passive": false
    }]; }
}
