import { defineComponent as K, mergeModels as S, useModel as Q, computed as x, ref as R, watch as U, openBlock as l, createElementBlock as r, mergeProps as C, unref as n, renderSlot as p, createElementVNode as f, normalizeStyle as H, normalizeClass as m, createVNode as v, withCtx as c, createBlock as g, createCommentVNode as $, Fragment as k, renderList as h, createTextVNode as O, toDisplayString as P } from "vue";
import { useTheme as Y } from "../../composables/useTheme.js";
import { useVirtualList as Z } from "../../composables/useVirtualList.js";
import j from "./TableHead.vue.js";
import I from "./TableHeader.vue.js";
import ee from "./TableBody.js";
import T from "./TableRow.vue.js";
import _ from "./TableCell.vue.js";
import te from "../spinner/Spinner.vue.js";
import se from "../skeleton/Skeleton.vue.js";
import le from "../icon/Icon.vue.js";
import { chevronDownIcon as oe } from "../../common/icons.js";
const ae = { key: 1 }, ie = { colspan: "999" }, re = { key: 2 }, ne = { colspan: "999" }, de = ["onClick"], ue = { colspan: "999" }, pe = {
  headers: {
    type: Array,
    default: () => []
  },
  items: {
    type: Array,
    default: () => []
  },
  sort: {
    type: Array,
    default: () => []
  },
  loading: Boolean,
  loadingSkeleton: Boolean,
  loadingLines: {
    type: [Number, String],
    default: 3
  },
  error: Boolean,
  dense: Boolean,
  fixed: Boolean,
  striped: Boolean,
  pointer: Boolean,
  scrollable: {
    type: Boolean,
    default: !0
  },
  stickyHeader: {
    type: Boolean,
    default: !0
  },
  expandable: Boolean,
  virtualList: Boolean,
  virtualListOffsetTop: Number,
  virtualListOffsetBottom: Number,
  virtualListItemHeight: {
    type: Number,
    default: 54
  },
  virtualListOverscan: {
    type: Number,
    default: 5
  },
  keyProp: String
}, ce = { name: "XTable" }, Le = /* @__PURE__ */ K({
  ...ce,
  props: /* @__PURE__ */ S({
    ...pe,
    items: {
      type: Array,
      default: () => []
    }
  }, {
    selected: {},
    selectedModifiers: {}
  }),
  emits: /* @__PURE__ */ S(["update:sort", "click-row"], ["update:selected"]),
  setup(B, { emit: z }) {
    const i = B, L = Q(B, "selected"), A = x(() => typeof L.value < "u");
    function V(e) {
      try {
        return JSON.parse(JSON.stringify(e));
      } catch {
        return [];
      }
    }
    const b = x(() => i.items), { list: M, containerProps: D, wrapperProps: E } = Z(
      b,
      {
        disabled: !i.virtualList,
        itemHeight: i.virtualListItemHeight || 54,
        topOffset: i.virtualListOffsetTop || 0,
        bottomOffset: i.virtualListOffsetBottom || 0,
        overscan: i.virtualListOverscan
      }
    ), y = R([]);
    U(b, (e) => {
      i.expandable && (y.value = V(e));
    }, { immediate: !0 });
    const J = z;
    function X(e, o) {
      if (e)
        for (let t = 0; t < o.length; t++) {
          const { 0: a, 1: s } = o[t].split(",");
          if (e === a)
            return parseInt(s) > 0 ? 1 : -1;
        }
    }
    function F(e) {
      const o = i.sort.slice(0);
      let t = !1;
      for (let a = 0; a < o.length; a++) {
        const { 0: s, 1: d } = o[a].split(",");
        if (s === e.value) {
          if (t = !0, d === "-1") {
            o.splice(a, 1, `${e.value},1`);
            break;
          } else if (d === "1") {
            o.splice(a, 1);
            break;
          }
        }
      }
      t || o.push(`${e.value},-1`), J("update:sort", o);
    }
    function W(e, o) {
      if (!o)
        return "";
      const t = Array.isArray(o) ? o : o.match(/([^[.\]])+/g);
      return (t == null ? void 0 : t.reduce((s, d) => s && s[d], e)) ?? "";
    }
    const { styles: q, classes: w, className: G } = Y("Table", {}, i);
    return (e, o) => (l(), r("div", C({
      class: [n(G), n(w).wrapper]
    }, n(D)), [
      p(e.$slots, "title"),
      p(e.$slots, "actions"),
      f("div", C(n(E), {
        class: {
          "!h-auto": i.loading
        }
      }), [
        f("table", {
          style: H(n(q)),
          class: m(n(w).table)
        }, [
          v(j, { "sticky-header": e.stickyHeader }, {
            default: c(() => [
              e.expandable ? (l(), g(I, {
                key: 0,
                width: "48",
                class: "!p-0"
              })) : $("", !0),
              (l(!0), r(k, null, h(e.headers, (t, a) => (l(), g(I, {
                key: a,
                "text-align": t.align,
                sort: X(t.value, e.sort),
                sortable: t.sortable,
                width: t.width,
                onClick: (s) => t.sortable ? F(t) : null
              }, {
                default: c(() => [
                  p(e.$slots, `header-${t.value}`, { header: t }, () => [
                    O(P(t.text), 1)
                  ])
                ]),
                _: 2
              }, 1032, ["text-align", "sort", "sortable", "width", "onClick"]))), 128))
            ]),
            _: 3
          }, 8, ["sticky-header"]),
          v(n(ee), null, {
            default: c(() => [
              e.loading ? (l(!0), r(k, { key: 0 }, h(Number(e.loadingLines), (t, a) => (l(), g(T, {
                key: a,
                striped: e.striped
              }, {
                default: c(() => [
                  (l(!0), r(k, null, h(e.headers, (s, d) => (l(), g(_, {
                    key: d,
                    "text-align": s.align,
                    width: s.width,
                    dense: e.dense,
                    fixed: e.fixed
                  }, {
                    default: c(() => [
                      p(e.$slots, `loading-${s.value}`, { item: t }, () => [
                        v(se, {
                          class: m(["max-w-[60%]", {
                            "mx-auto": s.align === "center",
                            "ml-auto": s.align === "right"
                          }]),
                          shape: s.skeletonShape || "line"
                        }, null, 8, ["shape", "class"])
                      ])
                    ]),
                    _: 2
                  }, 1032, ["text-align", "width", "dense", "fixed"]))), 128))
                ]),
                _: 2
              }, 1032, ["striped"]))), 128)) : e.error ? (l(), r("tr", ae, [
                f("td", ie, [
                  p(e.$slots, "error")
                ])
              ])) : !b.value || b.value.length === 0 ? (l(), r("tr", re, [
                f("td", ne, [
                  p(e.$slots, "empty")
                ])
              ])) : (l(!0), r(k, { key: 3 }, h(n(M), (t, a) => {
                var s, d;
                return l(), r(k, {
                  key: e.keyProp ?? a
                }, [
                  v(T, {
                    pointer: e.pointer,
                    striped: e.striped,
                    selected: A.value ? L.value === (e.keyProp ? t.data[e.keyProp] : t.index) : void 0,
                    onClick: (u) => e.$emit("click-row", t.data, t.index)
                  }, {
                    default: c(() => [
                      e.expandable ? (l(), g(_, {
                        key: 0,
                        width: "48",
                        class: "!p-1"
                      }, {
                        default: c(() => {
                          var u;
                          return [
                            f("button", {
                              type: "button",
                              class: m(["px-3 p-2", [e.dense ? "p-0.5" : "px-3 py-2"]]),
                              onClick: (N) => y.value[t.index].__expanded = !y.value[t.index].__expanded
                            }, [
                              v(le, {
                                icon: n(oe),
                                size: e.dense ? "xs" : "md",
                                class: m(["transition-transform", {
                                  "rotate-180": (u = y.value[t.index]) == null ? void 0 : u.__expanded
                                }])
                              }, null, 8, ["icon", "size", "class"])
                            ], 10, de)
                          ];
                        }),
                        _: 2
                      }, 1024)) : $("", !0),
                      (l(!0), r(k, null, h(e.headers, (u, N) => (l(), g(_, {
                        key: N,
                        "text-align": u.align,
                        truncate: u.truncate,
                        width: u.width,
                        dense: e.dense,
                        style: H([i.virtualList ? {
                          height: `${i.virtualListItemHeight}px`,
                          maxHeight: `${i.virtualListItemHeight}px`,
                          overflow: "hidden",
                          whiteSpace: "nowrap"
                        } : {}])
                      }, {
                        default: c(() => [
                          p(e.$slots, `item-${u.value}`, {
                            item: t.data
                          }, () => [
                            O(P(W(t.data, u.value)), 1)
                          ])
                        ]),
                        _: 2
                      }, 1032, ["text-align", "truncate", "width", "dense", "style"]))), 128))
                    ]),
                    _: 2
                  }, 1032, ["pointer", "striped", "selected", "onClick"]),
                  e.expandable ? (l(), r("tr", {
                    key: 0,
                    class: m({ hidden: !((s = y.value[t.index]) != null && s.__expanded) })
                  }, [
                    f("td", ue, [
                      f("div", {
                        class: m(["overflow-hidden transition-opacity", [(d = y.value[t.index]) != null && d.__expanded ? "" : "opacity-0 max-h-0"]])
                      }, [
                        p(e.$slots, "expanded-row", {
                          item: t.data
                        })
                      ], 2)
                    ])
                  ], 2)) : $("", !0)
                ], 64);
              }), 128))
            ]),
            _: 3
          }),
          e.loading ? (l(), r("div", {
            key: 0,
            class: m(n(w).loadingWrapper)
          }, [
            v(te, { size: "lg" })
          ], 2)) : $("", !0)
        ], 6)
      ], 16)
    ], 16));
  }
});
export {
  Le as default
};
