import { r as registerInstance, j as createEvent, h, g as getElement } from './index-07845439.js';
import { d as dist$1 } from './index-046ba252.js';
import './index-cd3eb450.js';
import { A as Address } from './index-e20749b7.js';
import { d as dist } from './index-63517df5.js';
import { N as Notice } from './index-f068b00b.js';
import './_commonjsHelpers-8fe71198.js';
import './App-15d9fce3.js';
import './index-b6cf748e.js';
import './index-265fba1f.js';

const sv = {
  Street: "Gata",
  "Zip code": "Postnummer",
  City: "Ort",
  Country: "Land",
  Save: "Spara",
  Cancel: "Avbryt",
  "Unknown address country": "Okänt adressland",
  primary: "primär",
  billing: "fakturering",
  delivery: "leverans",
  visit: "besök",
  "Please enter a valid address.": "Ange en giltig adress.",
};

function create(language) {
  return dist.create({
    sv,
  }, language);
}

const styleCss = ".sc-ig-address-input-h{display:block;margin-top:.5em}[hidden].sc-ig-address-input-h{display:none}form.sc-ig-address-input{display:-ms-flexbox;display:flex;-ms-flex-flow:row;flex-flow:row;-ms-flex-wrap:wrap;flex-wrap:wrap;border-collapse:collapse}smoothly-input.sc-ig-address-input{border:1px solid rgb(var(--smoothly-medium-color))}smoothly-input[name=street]#add.sc-ig-address-input,smoothly-input[name=address1]#add.sc-ig-address-input{width:calc(100% - 3.8em - 3px)}smoothly-input[name=street].sc-ig-address-input,smoothly-input[name=address1].sc-ig-address-input{width:100%}smoothly-input[name=zipCode].sc-ig-address-input,smoothly-input[name=address2].sc-ig-address-input{min-width:calc(35% - 2px);-ms-flex-positive:2;flex-grow:2;border-top:none}smoothly-input[name=city].sc-ig-address-input,smoothly-input[name=address3].sc-ig-address-input{min-width:calc(65% - 2px);border-top:none;-ms-flex-positive:1;flex-grow:1}smoothly-input[name=country].sc-ig-address-input{width:100%;border-top:none}form.sc-ig-address-input>div.sc-ig-address-input{width:100%}smoothly-submit.sc-ig-address-input,smoothly-trigger.sc-ig-address-input{width:auto;float:right;background-color:transparent;border:none;cursor:pointer;color:transparent;margin-bottom:.2em}smoothly-select#types.sc-ig-address-input{display:grid;width:100% !important;border:none;padding-bottom:.5em}smoothly-select#countries.sc-ig-address-input{width:3.5em;border-bottom:1px solid rgb(var(--smoothly-medium-color));border-right:none}#states.sc-ig-address-input{width:100% !important;border-top:none}smoothly-select.sc-ig-address-input{border:1px solid rgb(var(--smoothly-medium-color));padding-bottom:.3em;padding-right:.3em;display:grid}";

const IntergiroAddressInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.edit = createEvent(this, "edit", 7);
    this.create = createEvent(this, "create", 7);
    this.close = createEvent(this, "close", 7);
    this.notice = createEvent(this, "notice", 7);
    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 = 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
        ? dist$1.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 ? "" : dist$1.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" })))),
    ];
  }
  get element() { return getElement(this); }
};
IntergiroAddressInput.style = styleCss;

export { IntergiroAddressInput as ig_address_input };
