import { jsx as s, jsxs as S, Fragment as w } from "react/jsx-runtime";
import { useBreakpoint as R, Card as v, IconButton as k, useScrollToTop as z, useEdificeClient as $ } from "@edifice.io/react";
import { useSpring as j, animated as C } from "@react-spring/web";
import { useQueryClient as B } from "@tanstack/react-query";
import { p as x, j as E, s as A, k as M, w as q } from "./index2.js";
import { useState as L, useId as P, useEffect as Q } from "react";
import { useDroppable as G, useDraggable as H } from "@dnd-kit/core";
import { a as J, S as K, D as U } from "./DraggableCard.js";
const N = ({
  app: o,
  name: n,
  idFolder: l,
  isSelected: i = !1,
  isSelectable: h = !0,
  onClick: D,
  onSelect: b
}) => {
  const [t, a] = L(!1), p = P(), {
    lg: g
  } = R(), {
    setNodeRef: I
  } = G({
    id: p,
    data: {
      id: l,
      name: n,
      isTreeview: !1,
      accepts: ["folder", "resource"]
    }
  }), {
    attributes: y,
    listeners: u,
    setNodeRef: f,
    transform: e
  } = H({
    id: p,
    data: {
      id: l,
      type: "folder"
    },
    disabled: !g
  }), r = x(), d = E(), F = (c) => {
    f(c), I(c);
  }, m = d.overId === l, O = !d.canMove && d.isTreeview ? "no-drop" : t ? "grabbing" : "default", T = {
    transform: `translate3d(${((e == null ? void 0 : e.x) ?? 0) / 1}px, ${((e == null ? void 0 : e.y) ?? 0) / 1}px, 0)`,
    cursor: O
  };
  return Q(() => {
    const c = r.elementDrag === l;
    a(c);
  }, [r]), /* @__PURE__ */ s("div", { ref: F, style: {
    ...T
  }, children: t ? /* @__PURE__ */ s(U, { name: n, app: o, type: "folder" }) : /* @__PURE__ */ s(v, { app: o, isSelectable: !t && h, isSelected: !t && i || m && t, isFocused: m, onClick: D, onSelect: b, children: (c) => /* @__PURE__ */ S(w, { children: [
    !t && g && /* @__PURE__ */ s("div", { className: "card-header z-3", style: {
      position: "fixed",
      left: "37px"
    }, children: /* @__PURE__ */ s(k, { ...u, ...y, className: "bg-white z-3", color: "secondary", icon: /* @__PURE__ */ s(J, {}), variant: "ghost" }) }),
    /* @__PURE__ */ S(v.Body, { children: [
      /* @__PURE__ */ s(K, { width: "48", height: "48", className: `color-app-${c}` }),
      /* @__PURE__ */ s(v.Title, { children: n })
    ] })
  ] }) }) });
};
N.displayName = "FolderCard";
const re = ({
  data: o
}) => {
  var u, f;
  const n = B(), l = A(), i = M(), h = x(), D = z(), {
    currentApp: b
  } = $(), {
    setSelectedFolders: t,
    setFolderIds: a,
    openFolder: p
  } = q();
  function g(e) {
    i.includes(e.id) ? (a(i.filter((r) => r !== e.id)), t(l.filter((r) => r.id !== e.id))) : (a([e.id, ...i]), t([e, ...l]));
  }
  function I(e) {
    D(), p({
      folder: e,
      folderId: e.id,
      queryClient: n
    });
  }
  const y = j({
    from: {
      opacity: 0
    },
    to: {
      opacity: 1
    }
  });
  return (u = o == null ? void 0 : o.pages[0]) != null && u.folders.length ? /* @__PURE__ */ s(C.ul, { className: "grid ps-0 list-unstyled mb-24", children: (f = o == null ? void 0 : o.pages[0]) == null ? void 0 : f.folders.map((e) => {
    const {
      id: r,
      name: d
    } = e, F = h.elementDrag === r;
    return /* @__PURE__ */ s(C.li, { className: `g-col-4 ${F ? "z-2000" : "z-1"}`, style: {
      position: "relative",
      ...y
    }, children: /* @__PURE__ */ s(N, { name: d, idFolder: r, app: b, isSelected: i.includes(e.id), onClick: (m) => {
      m.stopPropagation(), I(e);
    }, onSelect: () => g(e) }) }, r);
  }) }) : null;
};
export {
  re as default
};
