import { defineComponent as B, ref as p, computed as h, resolveComponent as w, createElementBlock as b, openBlock as t, createVNode as i, unref as c, withCtx as d, withModifiers as x, normalizeClass as R, createCommentVNode as m, createBlock as M, createElementVNode as g, normalizeStyle as E, toDisplayString as I } from "vue";
import { ScalarIcon as N } from "@scalar/components";
import { Draggable as S } from "@scalar/draggable";
import { useRouter as z } from "vue-router";
import V from "./SidebarListElementActions.vue.js";
const $ = { class: "empty-variable-name line-clamp-1 text-sm break-all group-hover:pr-5" }, j = /* @__PURE__ */ B({
  __name: "SidebarListElement",
  props: {
    variable: {},
    warningMessage: {},
    to: {},
    isDeletable: { type: Boolean },
    isCopyable: { type: Boolean },
    isRenameable: { type: Boolean },
    isDraggable: { type: Boolean, default: !1 },
    isDroppable: { type: [Boolean, Function], default: !1 },
    collectionId: {}
  },
  emits: ["delete", "colorModal", "rename", "onDragEnd"],
  setup(e, { emit: u }) {
    const n = u, r = z(), f = (l) => {
      l.metaKey ? window.open(r.resolve(e.to).href, "_blank") : r.push(e.to);
    }, v = (l) => {
      n("delete", l);
    }, D = (l) => {
      n("colorModal", l);
    }, y = (l) => {
      n("rename", l);
    }, k = p(null), s = h(() => ({
      ceiling: 0.5,
      floor: 0.5
    }));
    return (l, a) => {
      const C = w("router-link");
      return t(), b("li", null, [
        i(c(S), {
          id: e.variable.uid,
          ref_key: "_draggableRef",
          ref: k,
          ceiling: s.value.ceiling,
          floor: s.value.floor,
          isDraggable: e.isDraggable,
          isDroppable: e.isDroppable,
          parentIds: e.collectionId ? [e.collectionId] : [],
          onOnDragEnd: a[2] || (a[2] = (...o) => l.$emit("onDragEnd", ...o))
        }, {
          default: d(() => [
            i(C, {
              class: R(["text-c-2 hover:bg-b-2 group relative flex h-8 items-center gap-1.5 rounded py-1 pr-1.5 font-medium no-underline", [e.variable.color ? "pl-5" : "pl-1.5"]]),
              exactActiveClass: "bg-b-2 !text-c-1",
              role: "button",
              to: e.to,
              onClick: a[1] || (a[1] = x((o) => f(o), ["prevent"]))
            }, {
              default: d(() => [
                e.variable.color ? (t(), b("button", {
                  key: 0,
                  class: "hover:bg-b-3 rounded p-1.5",
                  type: "button",
                  onClick: a[0] || (a[0] = (o) => D(e.variable.uid))
                }, [
                  g("div", {
                    class: "h-2.5 w-2.5 rounded-xl",
                    style: E({ backgroundColor: e.variable.color })
                  }, null, 4)
                ])) : m("", !0),
                e.variable.icon ? (t(), M(c(N), {
                  key: 1,
                  class: "text-sidebar-c-2 size-3.5 stroke-[2.25]",
                  icon: e.variable.icon
                }, null, 8, ["icon"])) : m("", !0),
                g("span", $, I(e.variable.name), 1),
                i(V, {
                  isCopyable: !!e.isCopyable,
                  isDeletable: !!e.isDeletable,
                  isRenameable: !!e.isRenameable,
                  variable: { ...e.variable, isDefault: e.variable.isDefault ?? !1 },
                  warningMessage: e.warningMessage,
                  onDelete: v,
                  onRename: y
                }, null, 8, ["isCopyable", "isDeletable", "isRenameable", "variable", "warningMessage"])
              ]),
              _: 1
            }, 8, ["class", "to"])
          ]),
          _: 1
        }, 8, ["id", "ceiling", "floor", "isDraggable", "isDroppable", "parentIds"])
      ]);
    };
  }
});
export {
  j as default
};
