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

const sv = {
  Scheme: "System",
  "Card number": "Kortnummer",
  Expires: "Giltigt t.o.m.",
  Close: "Stäng",
  "Add method": "Lägg till metod",
  "The account has no payment method.": "Kontot har ingen betalningsmetod.",
};

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

const styleCss = "[hidden].sc-payfunc-payment-methods-h{display:none}section.sc-payfunc-payment-methods{display:flex;justify-content:space-between;font-weight:bold}section.sc-payfunc-payment-methods>*.sc-payfunc-payment-methods{width:10em}section.sc-payfunc-payment-methods>*.sc-payfunc-payment-methods:nth-of-type(2){width:15em}@media only screen and (min-width: 1000px){smoothly-icon.sc-payfunc-payment-methods{visibility:hidden}smoothly-reorder.sc-payfunc-payment-methods{float:left}smoothly-reorder.sc-payfunc-payment-methods>*.sc-payfunc-payment-methods{margin-top:10px}payfunc-payment-method-add.sc-payfunc-payment-methods{position:relative;display:block;visibility:visible;width:50%;float:right}}@media only screen and (max-width: 1000px){smoothly-icon.sc-payfunc-payment-methods{visibility:visible;position:fixed;right:5%;cursor:pointer}payfunc-payment-method-add.sc-payfunc-payment-methods,#desktop.sc-payfunc-payment-methods{display:none}payfunc-payment-method-add.sc-payfunc-payment-methods,#phone.sc-payfunc-payment-methods{display:block;width:25rem;max-width:90%;margin:0 auto}.sc-payfunc-payment-methods-h>smoothly-reorder.sc-payfunc-payment-methods>*.sc-payfunc-payment-methods,table.sc-payfunc-payment-methods{max-width:60%;margin:0 auto;margin-top:10px}}";

const PayfuncPaymentMethods = class {
  constructor(hostRef) {
    registerInstance(this, hostRef);
    this.update = createEvent(this, "update", 7);
    this.delete = createEvent(this, "delete", 7);
    this.addable = false;
    this.deletable = false;
    this.mode = "card";
    this.opened = false;
  }
  componentWillLoad() {
    this.t = create(this.element);
  }
  renderMethods() {
    this.methods = [...this.methods];
  }
  deleteMethod(index) {
    window.setTimeout(() => {
      this.methods.splice(index, 1);
      this.renderMethods();
      this.delete.emit(this.methods);
    }, 500);
  }
  reorderMethods(event) {
    const fromIndex = event.detail[0];
    const toIndex = event.detail[1];
    const e = this.methods.splice(fromIndex, 1);
    this.methods.splice(toIndex, 0, ...e);
    this.update.emit(this.methods);
  }
  render() {
    return [
      this.addable
        ? [
          h("smoothly-icon", { name: this.opened ? "close-circle" : "add-circle", toolTip: this.opened ? this.t("Close") : this.t("Add method"), size: "large", onClick: () => (this.opened = !this.opened) }),
          h("payfunc-payment-method-add", { id: this.opened ? "phone" : "desktop", account: this.account, "api-key": this.apiKey, onAdd: () => this.renderMethods() }),
        ]
        : null,
      this.mode == "table" &&
        (this.methods.length > 0 ? (h("section", null, h("label", null, this.t("Scheme")), h("label", null, this.t("Card number")), h("label", null, this.t("Expires")))) : (h("p", null, this.t("The account has no payment method.")))),
      h("smoothly-reorder", { onReorder: (event) => this.reorderMethods(event) }, this.methods.map((method, index) => [
        h("payfunc-payment-method", { mode: this.mode, method: method, deletable: this.deletable, onDeleteMethod: () => this.deleteMethod(index) }),
      ])),
    ];
  }
  get element() { return getElement(this); }
};
PayfuncPaymentMethods.style = styleCss;

export { PayfuncPaymentMethods as payfunc_payment_methods };
