import { defineComponent as E, ref as J, watch as X, openBlock as n, createElementBlock as a, normalizeClass as c, unref as u, renderSlot as i, createElementVNode as p, normalizeStyle as F, createVNode as f, withCtx as d, createBlock as m, createCommentVNode as $, Fragment as y, renderList as g, createTextVNode as _, toDisplayString as C } from "vue";
import { useTheme as O } from "../../composables/useTheme.js";
import P from "./TableHead.vue.js";
import N from "./TableHeader.vue.js";
import W from "./TableBody.js";
import S from "./TableRow.vue.js";
import w from "./TableCell.vue.js";
import q from "../spinner/Spinner.vue.js";
import G from "../skeleton/Skeleton.vue.js";
import K from "../icon/Icon.vue.js";
import { chevronDownIcon as M } from "../../common/icons.js";
const Q = { key: 1 }, R = ["colspan"], U = { key: 2 }, Y = ["colspan"], Z = ["onClick"], j = { key: 0 }, x = { colspan: "999" }, ee = {
  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
}, te = { name: "XTable" }, fe = /* @__PURE__ */ E({
  ...te,
  props: {
    ...ee,
    items: {
      type: Array,
      default: () => []
    }
  },
  emits: ["update:sort", "click-row"],
  setup(h, { emit: z }) {
    const v = h;
    function A(e) {
      try {
        return JSON.parse(JSON.stringify(e));
      } catch {
        return [];
      }
    }
    const k = J([]);
    X(() => v.items, (e) => {
      v.expandable && (k.value = A(e));
    }, { immediate: !0 });
    const T = z;
    function H(e, o) {
      if (e)
        for (let t = 0; t < o.length; t++) {
          const { 0: l, 1: s } = o[t].split(",");
          if (e === l)
            return parseInt(s) > 0 ? 1 : -1;
        }
    }
    function V(e) {
      const o = v.sort.slice(0);
      let t = !1;
      for (let l = 0; l < o.length; l++) {
        const { 0: s, 1: r } = o[l].split(",");
        if (s === e.value) {
          if (t = !0, r === "-1") {
            o.splice(l, 1, `${e.value},1`);
            break;
          } else if (r === "1") {
            o.splice(l, 1);
            break;
          }
        }
      }
      t || o.push(`${e.value},-1`), T("update:sort", o);
    }
    function I(e, o) {
      if (!o)
        return "";
      const t = Array.isArray(o) ? o : o.match(/([^[.\]])+/g);
      return (t == null ? void 0 : t.reduce((s, r) => s && s[r], e)) ?? "";
    }
    const { styles: L, classes: b, className: D } = O("Table", {}, v);
    return (e, o) => (n(), a("div", {
      class: c([u(D), u(b).wrapper])
    }, [
      i(e.$slots, "title"),
      i(e.$slots, "actions"),
      p("table", {
        style: F(u(L)),
        class: c(u(b).table)
      }, [
        f(P, null, {
          default: d(() => [
            e.expandable ? (n(), m(N, {
              key: 0,
              width: "48",
              class: "!p-0",
              "sticky-header": e.stickyHeader
            }, null, 8, ["sticky-header"])) : $("", !0),
            (n(!0), a(y, null, g(e.headers, (t, l) => (n(), m(N, {
              key: l,
              "sticky-header": e.stickyHeader,
              "text-align": t.align,
              sort: H(t.value, e.sort),
              sortable: t.sortable,
              width: t.width,
              onClick: (s) => t.sortable ? V(t) : null
            }, {
              default: d(() => [
                i(e.$slots, `header-${t.value}`, { header: t }, () => [
                  _(C(t.text), 1)
                ])
              ]),
              _: 2
            }, 1032, ["sticky-header", "text-align", "sort", "sortable", "width", "onClick"]))), 128))
          ]),
          _: 3
        }),
        f(u(W), null, {
          default: d(() => [
            e.loading ? (n(!0), a(y, { key: 0 }, g(Number(e.loadingLines), (t, l) => (n(), m(S, {
              key: l,
              striped: e.striped
            }, {
              default: d(() => [
                (n(!0), a(y, null, g(e.headers, (s, r) => (n(), m(w, {
                  key: r,
                  "text-align": s.align,
                  width: s.width,
                  dense: e.dense,
                  fixed: e.fixed
                }, {
                  default: d(() => [
                    i(e.$slots, `loading-${s.value}`, { item: t }, () => [
                      f(G, {
                        class: c(["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 ? (n(), a("tr", Q, [
              p("td", {
                colspan: e.headers.length
              }, [
                i(e.$slots, "error")
              ], 8, R)
            ])) : !h.items || h.items.length === 0 ? (n(), a("tr", U, [
              p("td", {
                colspan: e.headers.length
              }, [
                i(e.$slots, "empty")
              ], 8, Y)
            ])) : (n(!0), a(y, { key: 3 }, g(h.items, (t, l) => {
              var s;
              return n(), a(y, { key: l }, [
                f(S, {
                  pointer: e.pointer,
                  striped: e.striped,
                  onClick: (r) => e.$emit("click-row", t)
                }, {
                  default: d(() => [
                    e.expandable ? (n(), m(w, {
                      key: 0,
                      width: "48",
                      class: "!p-1"
                    }, {
                      default: d(() => {
                        var r;
                        return [
                          p("button", {
                            type: "button",
                            class: "p-4",
                            onClick: (B) => k.value[l].__expanded = !k.value[l].__expanded
                          }, [
                            f(K, {
                              icon: u(M),
                              size: e.dense ? "xs" : "md",
                              class: c(["transition-transform", {
                                "rotate-180": (r = k.value[l]) == null ? void 0 : r.__expanded
                              }])
                            }, null, 8, ["icon", "size", "class"])
                          ], 8, Z)
                        ];
                      }),
                      _: 2
                    }, 1024)) : $("", !0),
                    (n(!0), a(y, null, g(e.headers, (r, B) => (n(), m(w, {
                      key: B,
                      "text-align": r.align,
                      truncate: r.truncate,
                      width: r.width,
                      dense: e.dense,
                      fixed: e.fixed
                    }, {
                      default: d(() => [
                        i(e.$slots, `item-${r.value}`, { item: t }, () => [
                          _(C(I(t, r.value)), 1)
                        ])
                      ]),
                      _: 2
                    }, 1032, ["text-align", "truncate", "width", "dense", "fixed"]))), 128))
                  ]),
                  _: 2
                }, 1032, ["pointer", "striped", "onClick"]),
                e.expandable ? (n(), a("tr", j, [
                  p("td", x, [
                    p("div", {
                      class: c(["overflow-hidden transition-opacity", [(s = k.value[l]) != null && s.__expanded ? "" : "opacity-0 max-h-0"]])
                    }, [
                      i(e.$slots, "expanded-row", { item: t })
                    ], 2)
                  ])
                ])) : $("", !0)
              ], 64);
            }), 128))
          ]),
          _: 3
        }),
        e.loading ? (n(), a("div", {
          key: 0,
          class: c(u(b).loadingWrapper)
        }, [
          f(q, { size: "lg" })
        ], 2)) : $("", !0)
      ], 6)
    ], 2));
  }
});
export {
  fe as default
};
