import '@das-fed/ui/packages/components/radio-tabs/style.css';
import { withInstall as A } from "@das-fed/utils/with-install/index";
import { defineComponent as z, ref as s, computed as B, watch as x, nextTick as N, createElementBlock as v, openBlock as d, withDirectives as y, createElementVNode as k, createVNode as M, unref as a, vShow as _, Fragment as S, renderList as E, normalizeClass as P, createTextVNode as F, toDisplayString as j } from "vue";
import { DasAutoRegisterIcon as q, DasIcon as D } from "@das-fed/ui/packages/components/icon/index";
import { vDasTooltip as G } from "@das-fed/ui/packages/components/text-tooltip/index";
const H = {
  key: 0,
  class: "time-type-item-box"
}, J = ["onClick"], Q = {
  key: 1,
  style: { width: "100%", display: "flex" }
}, U = {
  inheritAttrs: !1
}, V = /* @__PURE__ */ z({
  ...U,
  __name: "Index",
  props: {
    modelValue: { default: "" },
    tabOptions: { default: [] },
    optionsLabelKey: { default: "name" },
    optionsValueKey: { default: "id" },
    disabled: { type: Boolean, default: !1 }
  },
  emits: ["update:modelValue"],
  setup(f, { expose: c, emit: m }) {
    q({
      left: import("@das-fed/ui/packages/icons/left"),
      right: import("@das-fed/ui/packages/icons/right")
    });
    const n = f, p = s(null);
    let b = s(n.modelValue), T = s(n.optionsLabelKey || "name"), g = s(n.optionsValueKey || "id"), K = B(() => n.disabled), r = s([]), o = s(n.tabOptions), C = s(!0);
    x(
      () => n.modelValue,
      (t) => {
        b.value = t, N(() => {
          C.value && t && o.value && o.value.length > 0 && setTimeout(() => {
            const e = o.value.findIndex((l) => l[g.value] === t);
            if (e !== "-1" && e > 3) {
              const l = e + 1, $ = l % 4 === 0 ? Math.floor(l / 4) : Math.floor(l / 4) + 1;
              for (let I = 0; I < $ - 1; I++)
                h();
            }
          }, 200);
        });
      },
      {
        immediate: !0,
        deep: !0
      }
    ), x(
      () => n.tabOptions,
      (t) => {
        r.value = (t == null ? void 0 : t.length) > 4 ? t.slice(0, 4) : t, o.value = (t == null ? void 0 : t.length) > 0 ? t : [];
      },
      {
        immediate: !0,
        deep: !0
      }
    );
    const O = m, u = s(!1), R = (t) => {
      K.value || (C.value = !1, b.value = t, O("update:modelValue", t));
    };
    let i = s(0);
    const L = () => {
      i.value < 4 || (i.value -= 4, i.value < 4 ? r.value = o.value.slice(0, 4) : r.value = o.value.filter((t, e) => (e > i.value || e === i.value) && e < i.value + 4));
    }, h = () => {
      o.value.length - 1 - i.value < 4 || (i.value += 4, o.value.length - 1 - i.value < 4 ? r.value = o.value.slice(-4) : r.value = o.value.filter((t, e) => (e > i.value || e === i.value) && e < i.value + 4));
    };
    return c({
      $radiotabs: p,
      setPointer: (t) => {
        i.value = t;
      }
    }), (t, e) => (d(), v(
      "div",
      {
        class: "das-ui-radio-tabs",
        ref_key: "$radiotabs",
        ref: p
      },
      [
        y(k(
          "div",
          {
            class: "icon-left",
            onClick: e[0] || (e[0] = (l) => L()),
            onMouseover: e[1] || (e[1] = (l) => u.value = !0),
            onMouseleave: e[2] || (e[2] = (l) => u.value = !1)
          },
          [
            M(a(D), {
              icon: "left",
              iconColor: u.value ? "#3761CA" : "#666666",
              size: "mini"
            }, null, 8, ["iconColor"])
          ],
          544
          /* NEED_HYDRATION, NEED_PATCH */
        ), [
          [_, a(o).length > 4]
        ]),
        y(k(
          "div",
          {
            class: "icon-right",
            onClick: e[3] || (e[3] = (l) => h()),
            onMouseover: e[4] || (e[4] = (l) => u.value = !0),
            onMouseleave: e[5] || (e[5] = (l) => u.value = !1)
          },
          [
            M(a(D), {
              icon: "right",
              iconColor: u.value ? "#3761CA" : "#666666",
              size: "mini"
            }, null, 8, ["iconColor"])
          ],
          544
          /* NEED_HYDRATION, NEED_PATCH */
        ), [
          [_, a(o).length > 4]
        ]),
        k(
          "div",
          {
            class: "dimension-box",
            onMouseover: e[6] || (e[6] = (l) => u.value = !0),
            onMouseleave: e[7] || (e[7] = (l) => u.value = !1)
          },
          [
            a(o).length > 0 && a(r).length > 0 ? (d(), v("div", H, [
              (d(!0), v(
                S,
                null,
                E(a(r), (l) => (d(), v("div", {
                  class: P(["time-type-item", { tab_active: a(b) == l[a(g)] }]),
                  onClick: ($) => R(l[a(g)])
                }, [
                  y((d(), v("div", null, [
                    F(
                      j(l[a(T)]),
                      1
                      /* TEXT */
                    )
                  ])), [
                    [a(G)]
                  ])
                ], 10, J))),
                256
                /* UNKEYED_FRAGMENT */
              ))
            ])) : (d(), v("div", Q))
          ],
          32
          /* NEED_HYDRATION */
        )
      ],
      512
      /* NEED_PATCH */
    ));
  }
}), W = (f, c) => {
  const m = f.__vccOpts || f;
  for (const [n, p] of c)
    m[n] = p;
  return m;
}, X = /* @__PURE__ */ W(V, [["__scopeId", "data-v-405865ad"]]), le = A(X), oe = () => s(null);
export {
  le as DasRadioTabs,
  oe as DasRadioTabsRef,
  le as default
};
