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 n, computed as B, watch as x, nextTick as N, createElementBlock as v, openBlock as d, withDirectives as y, createElementVNode as h, createVNode as M, unref as i, vShow as _, Fragment as P, renderList as S, normalizeClass as E, 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 s = f, p = n(null);
    let g = n(s.modelValue), T = n(s.optionsLabelKey || "name"), b = n(s.optionsValueKey || "id"), K = B(() => s.disabled), r = n([]), o = n(s.tabOptions), k = n(!0);
    x(
      () => s.modelValue,
      (t) => {
        g.value = t, N(() => {
          k.value && t && o.value && o.value.length > 0 && setTimeout(() => {
            const e = o.value.findIndex((l) => l[b.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++)
                C();
            }
          }, 200);
        });
      },
      {
        immediate: !0,
        deep: !0
      }
    ), x(
      () => s.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 = n(!1), R = (t) => {
      K.value || (k.value = !1, console.log(t, "change-tab"), g.value = t, O("update:modelValue", t));
    };
    let a = n(0);
    const L = () => {
      console.log("←", a.value, o.value), !(a.value < 4) && (a.value -= 4, a.value < 4 ? r.value = o.value.slice(0, 4) : (console.log(555), r.value = o.value.filter((t, e) => (e > a.value || e === a.value) && e < a.value + 4)));
    }, C = () => {
      console.log("→", a.value, o.value.length), !(o.value.length - 1 - a.value < 4) && (a.value += 4, o.value.length - 1 - a.value < 4 ? r.value = o.value.slice(-4) : r.value = o.value.filter((t, e) => (e > a.value || e === a.value) && e < a.value + 4));
    };
    return c({
      $radiotabs: p,
      setPointer: (t) => {
        console.log("setPointer:" + t), a.value = t;
      }
    }), (t, e) => (d(), v(
      "div",
      {
        class: "das-ui-radio-tabs",
        ref_key: "$radiotabs",
        ref: p
      },
      [
        y(h(
          "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(i(D), {
              icon: "left",
              iconColor: u.value ? "#3761CA" : "#666666",
              size: "mini"
            }, null, 8, ["iconColor"])
          ],
          544
          /* NEED_HYDRATION, NEED_PATCH */
        ), [
          [_, i(o).length > 4]
        ]),
        y(h(
          "div",
          {
            class: "icon-right",
            onClick: e[3] || (e[3] = (l) => C()),
            onMouseover: e[4] || (e[4] = (l) => u.value = !0),
            onMouseleave: e[5] || (e[5] = (l) => u.value = !1)
          },
          [
            M(i(D), {
              icon: "right",
              iconColor: u.value ? "#3761CA" : "#666666",
              size: "mini"
            }, null, 8, ["iconColor"])
          ],
          544
          /* NEED_HYDRATION, NEED_PATCH */
        ), [
          [_, i(o).length > 4]
        ]),
        h(
          "div",
          {
            class: "dimension-box",
            onMouseover: e[6] || (e[6] = (l) => u.value = !0),
            onMouseleave: e[7] || (e[7] = (l) => u.value = !1)
          },
          [
            i(o).length > 0 && i(r).length > 0 ? (d(), v("div", H, [
              (d(!0), v(
                P,
                null,
                S(i(r), (l) => (d(), v("div", {
                  class: E(["time-type-item", { tab_active: i(g) == l[i(b)] }]),
                  onClick: ($) => R(l[i(b)])
                }, [
                  y((d(), v("div", null, [
                    F(
                      j(l[i(T)]),
                      1
                      /* TEXT */
                    )
                  ])), [
                    [i(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 [s, p] of c)
    m[s] = p;
  return m;
}, X = /* @__PURE__ */ W(V, [["__scopeId", "data-v-405865ad"]]), le = A(X), oe = () => n(null);
export {
  le as DasRadioTabs,
  oe as DasRadioTabsRef,
  le as default
};
