import { r as registerInstance, j as createEvent, h, g as getElement } from './index-aeac5cad.js';
import './_commonjsHelpers-91fffb88.js';
import { I as Item } from './index-df45deab.js';
import { d as dist } from './index-fdd60c34.js';

const sv = {
  Qty: "Antal",
  Unit: "Enhet",
  Name: "Namn",
  Price: "Pris",
  VAT: "Moms",
  "Clear/remove item": "Töm/ta bort artikel",
};

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

const styleCss = ".sc-payfunc-item-input-h{display:block}[hidden].sc-payfunc-item-input-h{display:none}*.sc-payfunc-item-input{z-index:0}.sc-payfunc-item-input-h>form.sc-payfunc-item-input{display:flex;flex-wrap:nowrap}.sc-payfunc-item-input-h>form.sc-payfunc-item-input>smoothly-input.sc-payfunc-item-input{border:1px solid rgb(var(--smoothly-medium-color));margin-left:-1px;flex-grow:1}.sc-payfunc-item-input-h>form.sc-payfunc-item-input>smoothly-input.sc-payfunc-item-input>#itemName.sc-payfunc-item-input{flex-grow:2}.sc-payfunc-item-input-h>form.sc-payfunc-item-input>smoothly-trigger.sc-payfunc-item-input{float:right;padding-top:.3em}";

const PayfuncItemInput = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.itemChanged = createEvent(this, "itemChanged", 7);
    this.itemCleared = createEvent(this, "itemCleared", 7);
    this.item = {};
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  clearInputs(e) {
    if (e.detail.name == "clear") {
      e.stopPropagation();
      e.preventDefault();
      const quantity = document.getElementById("itemQuantity");
      const unit = document.getElementById("itemUnit");
      const name = document.getElementById("itemName");
      const price = document.getElementById("itemPrice");
      const vat = document.getElementById("itemVat");
      const inputs = [quantity, unit, name, price, vat];
      for (const input of inputs)
        if (hasStringValue(input) || hasNumberValue(input))
          input.value = "";
      this.updateItem();
      this.itemCleared.emit();
    }
  }
  updateItem() {
    const quantity = document.getElementById("itemQuantity");
    const unit = document.getElementById("itemUnit");
    const name = document.getElementById("itemName");
    const price = document.getElementById("itemPrice");
    const vat = document.getElementById("itemVat");
    const item = Item.fromVatInclusivePrice(hasNumberValue(price) ? price.value : 0, hasNumberValue(vat) ? vat.value : undefined, undefined, hasStringValue(name) ? name.value : undefined, hasStringValue(quantity) && Number(quantity.value) > 0 ? Number(quantity.value) : undefined, hasStringValue(unit) ? unit.value : undefined, undefined);
    this.itemChanged.emit(item);
  }
  render() {
    const t = this.t;
    return [
      h("form", { name: "item" }, h("smoothly-input", { class: "left small", onKeyDown: this.updateItem.bind(this), id: "itemQuantity", value: this.item.quantity, type: "text", name: "quantity" }, t("Qty")), h("smoothly-input", { class: "small", onKeyDown: this.updateItem.bind(this), id: "itemUnit", value: this.item.unit, type: "text", name: "unit" }, t("Unit")), h("smoothly-input", { class: "big", onKeyDown: this.updateItem.bind(this), id: "itemName", value: this.item.name, type: "text", name: "name" }, t("Name")), h("smoothly-input", { class: "medium", onKeyDown: this.updateItem.bind(this), id: "itemPrice", value: this.inclusivePrice, type: "price", name: "price" }, t("Price")), h("smoothly-input", { class: "medium", onKeyDown: this.updateItem.bind(this), id: "itemVat", value: this.vatPercentage, type: "percent", name: "vat" }, t("VAT")), h("smoothly-trigger", { fill: "clear", name: "clear" }, h("smoothly-icon", { toolTip: t("Clear/remove item"), size: "small", name: "trash" }))),
    ];
  }
  get element() { return getElement(this); }
};
function hasStringValue(element) {
  return typeof element.value === "string";
}
function hasNumberValue(element) {
  return typeof element.value === "number";
}
PayfuncItemInput.style = styleCss;

export { PayfuncItemInput as payfunc_item_input };
