import { toRef as R, computed as y, ref as m, onMounted as Q, nextTick as p, onUnmounted as X, watch as N, createElementBlock as s, openBlock as i, normalizeClass as r, createCommentVNode as l, createElementVNode as c, normalizeStyle as Z, Fragment as F, renderList as L, createBlock as _, withCtx as h, toDisplayString as V, createVNode as H } from "vue";
import $ from "../../1_atoms/ButtonContextMenu/ButtonContextMenu.vue.js";
import Y from "../../1_icons/SettingsIcon.vue.js";
import I from "../../1_atoms/Tooltip/Tooltip.vue.js";
/* empty css             */
import tt from "../../../_virtual/_plugin-vue_export-helper.js";
const et = ["onClick"], ot = ["src", "alt"], it = {
  key: 1,
  class: "sidebar__notification-count"
}, nt = { class: "sidebar__scroll-container" }, st = ["onClick"], at = ["src", "alt"], rt = ["src"], lt = { key: 2 }, ct = {
  key: 2,
  class: "sidebar__settings-container"
}, ut = {
  class: "sidebar__settings-btn",
  type: "button"
}, dt = {
  key: 0,
  class: "sidebar__settings-indicator-anchor"
}, ft = {
  key: 1,
  class: "sidebar__settings-indicator"
}, mt = {
  key: 0,
  class: "sidebar__settings-indicator-anchor"
}, gt = {
  key: 1,
  class: "sidebar__settings-indicator"
}, _t = {
  __name: "SideBar",
  props: {
    sidebarItems: {
      type: Array,
      required: !0,
      default: () => []
    },
    horizontal: {
      type: Boolean,
      required: !1,
      default: !1
    },
    menuActions: {
      type: Array,
      required: !1,
      default: () => []
    },
    showSettings: {
      type: Boolean,
      required: !1,
      default: !0
    },
    settingsButtonMode: {
      type: String,
      required: !1,
      default: "menu"
      // 'menu' | 'action'
    },
    showSettingsIndicator: {
      type: Boolean,
      required: !1,
      default: !1
    },
    settingsIndicatorTooltip: {
      type: String,
      required: !1,
      default: ""
    },
    /** Список строк для тултипа индикатора (будут показаны друг под другом) */
    settingsIndicatorTooltipItems: {
      type: Array,
      required: !1,
      default: () => []
    },
    /** Длительность автопоказа тултипа индикатора при появлении кружка, мс */
    settingsIndicatorTooltipAutoShowMs: {
      type: Number,
      required: !1,
      default: 8e3
    }
  },
  emits: ["selectItem", "settingsClick"],
  setup(n, { emit: j }) {
    const u = n, v = R(u, "sidebarItems"), w = R(u, "menuActions"), B = j, k = y(
      () => Array.isArray(u.settingsIndicatorTooltipItems) ? u.settingsIndicatorTooltipItems.map((t) => String(t ?? "").trim()).filter(Boolean) : []
    ), x = y(
      () => k.value.length > 0 || !!u.settingsIndicatorTooltip.trim()
    ), A = y(
      () => v.value.filter((t) => t.isFixedBottom).sort((t, e) => e.notificationCount - t.notificationCount)
    ), D = y(
      () => v.value.filter((t) => !t.isFixedBottom).sort((t, e) => e.notificationCount - t.notificationCount)
    ), G = (t) => {
      const e = v.value.find((o) => o.itemId === t);
      B("selectItem", e);
    }, q = (t, e) => {
      K(t.currentTarget), G(e);
    }, P = (t) => {
      const e = t.split(" ");
      return e.length > 2 ? e.slice(0, 2).join(" ") : t;
    }, U = (t) => {
      console.log("Выбрано действие:", t), typeof t.action == "function" && t.action();
    }, W = () => {
      console.log("Кнопка меню была нажата");
    }, J = () => {
      var e;
      B("settingsClick");
      const t = (e = w.value) == null ? void 0 : e[0];
      t && typeof t.action == "function" && !t.disabled && t.action();
    }, d = m(null), C = m(null), S = m(!1), T = m(0), b = m(40), z = m(!1), E = (t) => {
      const e = d.value;
      if (!e || !t) return 0;
      const o = e.getBoundingClientRect(), a = t.getBoundingClientRect(), O = a.top + a.height / 2 - o.top - b.value / 2;
      return Math.max(0, O);
    }, g = () => {
      if (!d.value) return;
      const e = d.value.querySelector(".sidebar__image--active");
      e ? (T.value = E(e), S.value = !0) : S.value = !1;
    }, K = (t) => {
      try {
        if (!t || !d.value) return;
        const e = t.querySelector(".sidebar__image");
        if (!e) return;
        const o = E(e), a = 12, f = 160;
        z.value = !0, b.value = a, setTimeout(() => {
          T.value = o, requestAnimationFrame(() => {
            b.value = 40, setTimeout(() => {
              z.value = !1;
            }, f);
          });
        }, f);
      } catch {
      }
    }, M = () => g();
    return Q(() => {
      var e;
      p(g), window.addEventListener("resize", M);
      const t = (e = d.value) == null ? void 0 : e.querySelector(".sidebar__scroll-container");
      t && t.addEventListener("scroll", g);
    }), X(() => {
      var e;
      window.removeEventListener("resize", M);
      const t = (e = d.value) == null ? void 0 : e.querySelector(".sidebar__scroll-container");
      t && t.removeEventListener("scroll", g);
    }), N(() => v.value.map((t) => t.selected), () => p(g)), N(
      () => u.showSettings && u.showSettingsIndicator && x.value,
      (t, e) => {
        !t || e === !0 || p(() => {
          p(() => {
            var o, a;
            (a = (o = C.value) == null ? void 0 : o.startAutoShow) == null || a.call(o);
          });
        });
      },
      { flush: "post", immediate: !0 }
    ), (t, e) => (i(), s("div", {
      ref_key: "containerRef",
      ref: d,
      class: r(["sidebar__container", { "sidebar-horizontal__container": n.horizontal }])
    }, [
      !n.horizontal && S.value ? (i(), s("span", {
        key: 0,
        class: r(["sidebar__selected-bar", { "is-animating": z.value }]),
        style: Z({ top: T.value + "px", height: b.value + "px" })
      }, null, 6)) : l("", !0),
      A.value.length > 0 ? (i(), s("ul", {
        key: 1,
        class: r(["sidebar__list-fixed", { "sidebar-horizontal__list-fixed": n.horizontal }])
      }, [
        (i(!0), s(F, null, L(A.value, (o, a) => (i(), s("li", {
          key: a,
          class: r(["sidebar__item-fixed", { "sidebar-horizontal__item": n.horizontal }]),
          onClick: (f) => q(f, o.itemId)
        }, [
          o.name ? (i(), _(I, {
            key: 0,
            text: P(o.name),
            position: "right",
            offset: 8
          }, {
            default: h(() => [
              c("img", {
                src: o.icon,
                alt: o.name,
                class: r(["sidebar__image", {
                  "sidebar__image--active": o.selected === !0,
                  "sidebar-horizontal__image": n.horizontal
                }])
              }, null, 10, ot),
              e[0] || (e[0] = c("p", null, "Мои", -1))
            ]),
            _: 2
          }, 1032, ["text"])) : l("", !0),
          o.notificationCount ? (i(), s("span", it, V(o.notificationCount > 99 ? "99+" : o.notificationCount), 1)) : l("", !0)
        ], 10, et))), 128))
      ], 2)) : l("", !0),
      c("div", nt, [
        c("ul", {
          class: r(["sidebar__list", { "sidebar-horizontal__list": n.horizontal }])
        }, [
          (i(!0), s(F, null, L(D.value, (o, a) => (i(), s("li", {
            key: a,
            class: r(["sidebar__item", { "sidebar-horizontal__item": n.horizontal }]),
            onClick: (f) => q(f, o.itemId)
          }, [
            o.name ? (i(), _(I, {
              key: 0,
              text: o.name,
              position: "right",
              offset: 8
            }, {
              default: h(() => [
                c("img", {
                  src: o.icon,
                  alt: o.name,
                  class: r(["sidebar__image", {
                    "sidebar__image--active": o.selected === !0,
                    "sidebar-horizontal__image": n.horizontal
                  }])
                }, null, 10, at)
              ]),
              _: 2
            }, 1032, ["text"])) : (i(), s("img", {
              key: 1,
              src: o.icon,
              alt: "icon",
              class: r(["sidebar__image", {
                "sidebar__image--active": o.selected === !0,
                "sidebar-horizontal__image": n.horizontal
              }])
            }, null, 10, rt)),
            o.notificationCount ? (i(), s("span", lt, V(o.notificationCount > 99 ? "99+" : o.notificationCount), 1)) : l("", !0)
          ], 10, st))), 128))
        ], 2)
      ]),
      n.showSettings ? (i(), s("div", ct, [
        n.settingsButtonMode === "menu" ? (i(), _($, {
          key: 0,
          actions: w.value,
          mode: "click",
          "menu-side": "top-right",
          onClick: U,
          onButtonClick: W
        }, {
          default: h(() => [
            c("button", ut, [
              H(Y),
              n.showSettingsIndicator ? (i(), s("span", dt, [
                x.value ? (i(), _(I, {
                  key: 0,
                  ref_key: "settingsIndicatorTooltipRef",
                  ref: C,
                  text: n.settingsIndicatorTooltip,
                  texts: k.value,
                  position: "top",
                  offset: 8,
                  "max-width": "460px",
                  "auto-show-duration": n.settingsIndicatorTooltipAutoShowMs
                }, {
                  default: h(() => [...e[1] || (e[1] = [
                    c("span", { class: "sidebar__settings-indicator" }, null, -1)
                  ])]),
                  _: 1
                }, 8, ["text", "texts", "auto-show-duration"])) : (i(), s("span", ft))
              ])) : l("", !0)
            ])
          ]),
          _: 1
        }, 8, ["actions"])) : (i(), s("button", {
          key: 1,
          class: "sidebar__settings-btn",
          type: "button",
          onClick: J
        }, [
          H(Y),
          n.showSettingsIndicator ? (i(), s("span", mt, [
            x.value ? (i(), _(I, {
              key: 0,
              ref_key: "settingsIndicatorTooltipRef",
              ref: C,
              text: n.settingsIndicatorTooltip,
              texts: k.value,
              position: "top",
              offset: 8,
              "max-width": "460px",
              "auto-show-duration": n.settingsIndicatorTooltipAutoShowMs
            }, {
              default: h(() => [...e[2] || (e[2] = [
                c("span", { class: "sidebar__settings-indicator" }, null, -1)
              ])]),
              _: 1
            }, 8, ["text", "texts", "auto-show-duration"])) : (i(), s("span", gt))
          ])) : l("", !0)
        ]))
      ])) : l("", !0)
    ], 2));
  }
}, kt = /* @__PURE__ */ tt(_t, [["__scopeId", "data-v-f93a9b48"]]);
export {
  kt as default
};
