import { d as C } from "./index-TZ6jyf0R.js";
import { resolveComponent as a, resolveDirective as g, createElementBlock as c, openBlock as r, withDirectives as v, createVNode as s, withCtx as n, createTextVNode as i, toDisplayString as p, createElementVNode as h, normalizeClass as S, Fragment as k, renderList as D, withModifiers as y } from "vue";
import { _ as P } from "./install-CMReC2O4.js";
const H = {
  name: "WtTableColumnSelect",
  model: {
    prop: "headers",
    event: "change"
  },
  /**
   * @emits {Array} change - Fires when headers are changed. Emits mutated headers
   */
  props: {
    /**
     * Each header should have following schema: { value: String, show: Boolean, text: String }
     * @type {Array}
     * @required
     * @model headers
     */
    headers: {
      type: Array,
      required: !0,
      description: "Each header should have following schema: { value: String, show: Boolean, text: String }"
    },
    /**
     * Header values to exclude from selection
     * @type {Array}
     * @default []
     */
    staticHeaders: {
      type: Array,
      default: () => [],
      description: "Header values to exclude from selection"
    }
  },
  emits: [
    "change"
  ],
  data: () => ({
    draft: [],
    // headers draft
    isColumnSelectPopup: !1
  }),
  computed: {
    changeableDraft() {
      return this.draft.filter((e) => !this.staticHeaders.includes(e.value)).sort((e, l) => this.shownColLabel(e)?.localeCompare(this.shownColLabel(l)));
    }
  },
  watch: {
    isColumnSelectPopup: {
      handler() {
        this.fillHeadersDraft();
      }
    }
  },
  methods: {
    shownColLabel({ text: e, locale: l }) {
      return !e && l ? typeof l == "string" ? this.$t(l) : this.$t(...l) : e;
    },
    openPopup() {
      this.isColumnSelectPopup = !0;
    },
    close() {
      this.isColumnSelectPopup = !1;
    },
    fillHeadersDraft() {
      this.draft = C(this.headers);
    },
    setShownColumns() {
      this.$emit("change", this.draft), this.close();
    }
  }
}, L = { class: "wt-table-column-select" }, U = { class: "wt-table-column-select__popup-list-wrap" }, x = ["onClickCapture"];
function B(e, l, E, I, N, t) {
  const m = a("wt-icon-btn"), _ = a("wt-checkbox"), u = a("wt-button"), w = a("wt-popup"), f = g("tooltip");
  return r(), c("div", L, [
    v(s(m, {
      icon: "column-select",
      onClick: t.openPopup
    }, null, 8, ["onClick"]), [
      [f, e.$t("webitelUI.tableColumnSelect.title")]
    ]),
    s(w, {
      shown: e.isColumnSelectPopup,
      class: "wt-table-column-select__popup",
      onClose: t.close
    }, {
      title: n(() => [
        i(p(e.$t("webitelUI.tableColumnSelect.title")), 1)
      ]),
      main: n(() => [
        h("div", U, [
          h("ul", {
            class: S([{
              "wt-table-column-select__popup-list--md": t.changeableDraft.length > 10 && t.changeableDraft.length <= 20,
              "wt-table-column-select__popup-list--lg": t.changeableDraft.length > 20
            }, "wt-table-column-select__popup-list"])
          }, [
            (r(!0), c(k, null, D(t.changeableDraft, (o, b) => (r(), c("li", {
              key: b,
              class: "wt-table-column-select__popup-item",
              onClickCapture: y((d) => o.show = !o.show, ["prevent"])
            }, [
              s(_, {
                label: t.shownColLabel(o),
                selected: o.show,
                "onUpdate:selected": (d) => o.show = d
              }, null, 8, ["label", "selected", "onUpdate:selected"])
            ], 40, x))), 128))
          ], 2)
        ])
      ]),
      actions: n(() => [
        s(u, { onClick: t.setShownColumns }, {
          default: n(() => [
            i(p(e.$t("reusable.add")), 1)
          ], void 0, !0),
          _: 1
        }, 8, ["onClick"]),
        s(u, {
          color: "secondary",
          onClick: t.close
        }, {
          default: n(() => [
            i(p(e.$t("reusable.cancel")), 1)
          ], void 0, !0),
          _: 1
        }, 8, ["onClick"])
      ]),
      _: 1
    }, 8, ["shown", "onClose"])
  ]);
}
const A = /* @__PURE__ */ P(H, [["render", B], ["__scopeId", "data-v-405c9158"]]);
export {
  A as default
};
