import { jsxs as l, jsx as t, Fragment as H } from "react/jsx-runtime";
import D, { useState as $, useEffect as j, useCallback as V } from "react";
import { useBreakpoint as E, useEdificeClient as T, Card as m, IconButton as G, Image as L, AppIcon as U, Avatar as q, Tooltip as F, useDate as J, Button as K } from "@edifice.io/react";
import { useSpring as Q, animated as P } from "@react-spring/web";
import W from "clsx";
import { useTranslation as z } from "react-i18next";
import { l as B, p as X, r as Y, n as Z, t as ee, w as te } from "./index2.js";
import { useDraggable as ie } from "@dnd-kit/core";
import { a as ae, D as le } from "./DraggableCard.js";
const ne = ({
  title: i,
  titleId: e,
  ...n
}) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", "aria-labelledby": e, ...n, children: [
  i ? /* @__PURE__ */ t("title", { id: e, children: i }) : null,
  /* @__PURE__ */ t("path", { fill: "currentColor", fillRule: "evenodd", d: "M9.726 3.29A9.01 9.01 0 0 0 3.055 11H7.05a16.3 16.3 0 0 1 2.676-7.71m4.548 0A16.3 16.3 0 0 1 16.95 11h3.995a9.01 9.01 0 0 0-6.67-7.71m.668 7.71A14.3 14.3 0 0 0 12 3.55 14.3 14.3 0 0 0 9.058 11zm-5.884 2h5.884A14.3 14.3 0 0 1 12 20.45 14.3 14.3 0 0 1 9.058 13M7.05 13H3.055a9.01 9.01 0 0 0 6.67 7.71A16.3 16.3 0 0 1 7.05 13m7.224 7.71A16.3 16.3 0 0 0 16.95 13h3.995a9.01 9.01 0 0 1-6.67 7.71M12 23c6.075 0 11-4.925 11-11S18.075 1 12 1 1 5.925 1 12s4.925 11 11 11", clipRule: "evenodd" })
] }), se = ({
  title: i,
  titleId: e,
  ...n
}) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", width: "24", height: "24", fill: "none", viewBox: "0 0 24 24", "aria-hidden": "true", "aria-labelledby": e, ...n, children: [
  i ? /* @__PURE__ */ t("title", { id: e, children: i }) : null,
  /* @__PURE__ */ t("g", { fill: "currentColor", fillRule: "evenodd", clipPath: "url(#icon-users_svg__a)", clipRule: "evenodd", children: /* @__PURE__ */ t("path", { d: "M19.055 12.803a1 1 0 0 1 1.272-.618c1.128.39 2.061 1.247 2.7 2.351.64 1.106.972 2.435.973 3.782V21a1 1 0 1 1-2 0v-2.681c0-1.03-.258-2.009-.704-2.782-.448-.773-1.034-1.258-1.623-1.462a1 1 0 0 1-.618-1.272M15.187 1.384a1 1 0 0 1 1.036-.962 5.129 5.129 0 0 1 2.11 9.71 1 1 0 1 1-.896-1.788 3.129 3.129 0 0 0-1.288-5.924 1 1 0 0 1-.962-1.036M1.505 15.694C2.481 14.622 3.825 14 5.25 14h8.5c1.424 0 2.769.622 3.744 1.694.974 1.068 1.506 2.498 1.506 3.973V22a1 1 0 1 1-2 0v-2.333c0-1.001-.363-1.945-.984-2.627-.618-.679-1.436-1.04-2.266-1.04h-8.5c-.83 0-1.648.361-2.266 1.04-.621.682-.984 1.626-.984 2.627V22a1 1 0 1 1-2 0v-2.333c0-1.475.533-2.905 1.505-3.974M9.5 3a3.5 3.5 0 1 0 0 7 3.5 3.5 0 0 0 0-7M4 6.5a5.5 5.5 0 1 1 11 0 5.5 5.5 0 0 1-11 0" }) }),
  /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "icon-users_svg__a", children: /* @__PURE__ */ t("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
] }), de = ({
  title: i,
  titleId: e,
  ...n
}) => /* @__PURE__ */ l("svg", { xmlns: "http://www.w3.org/2000/svg", fill: "none", viewBox: "0 0 24 24", width: "24", height: "24", "aria-hidden": "true", "aria-labelledby": e, ...n, children: [
  i ? /* @__PURE__ */ t("title", { id: e, children: i }) : null,
  /* @__PURE__ */ t("g", { clipPath: "url(#icon-one-profile_svg__a)", children: /* @__PURE__ */ t("path", { fill: "currentColor", d: "M12 0a12 12 0 1 0 0 24 12 12 0 0 0 0-24m0 4.65a4.26 4.26 0 1 1 0 8.51 4.26 4.26 0 0 1 0-8.51m0 16.64a9.27 9.27 0 0 1-7.09-3.3 5.4 5.4 0 0 1 4.77-2.9c.11 0 .23.03.34.06.63.2 1.29.33 1.98.33.7 0 1.35-.13 1.98-.33.11-.03.23-.05.34-.05a5.4 5.4 0 0 1 4.77 2.89 9.27 9.27 0 0 1-7.09 3.3" }) }),
  /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: "icon-one-profile_svg__a", children: /* @__PURE__ */ t("path", { fill: "#fff", d: "M0 0h24v24H0z" }) }) })
] }), k = ({
  app: i,
  resource: e,
  time: n,
  isSelected: b = !1,
  isSelectable: w = !0,
  onClick: p,
  onSelect: r
}) => {
  const [s, g] = $(!1), h = B(), {
    lg: v
  } = E(), u = `/userbook/avatar/${e == null ? void 0 : e.creatorId}`;
  function R(f) {
    const {
      rights: M,
      creatorId: C
    } = f || {};
    return M.filter((O) => !O.includes(C)).length >= 1;
  }
  const {
    attributes: y,
    listeners: _,
    setNodeRef: I,
    transform: d
  } = ie({
    id: e.id,
    data: {
      id: e.id,
      type: "resource"
    },
    disabled: !!h || !v
  }), S = R(e), N = e == null ? void 0 : e.public, x = X(), {
    appCode: a
  } = T(), {
    t: c
  } = z(), o = {
    position: s ? "absolute" : "relative",
    zIndex: s ? 2e3 : 1,
    transform: `translate3d(${((d == null ? void 0 : d.x) ?? 0) / 1}px, ${((d == null ? void 0 : d.y) ?? 0) / 1}px, 0)`
  };
  return j(() => {
    const f = x.elementDrag === e.id;
    g(f);
  }, [x]), /* @__PURE__ */ t("div", { ref: I, style: {
    ...o
  }, children: s ? /* @__PURE__ */ t(le, { app: i, type: "resource", name: e == null ? void 0 : e.name }) : /* @__PURE__ */ t(m, { app: i, isSelected: !s && b, isSelectable: !s && w, onClick: p, onSelect: r, children: () => /* @__PURE__ */ l(H, { children: [
    !s && v && !h && /* @__PURE__ */ t("div", { className: "card-header z-3", style: {
      position: "fixed",
      left: "37px"
    }, children: /* @__PURE__ */ t(G, { ..._, ...y, className: "bg-white z-3", color: "secondary", icon: /* @__PURE__ */ t(ae, {}), variant: "ghost" }) }),
    /* @__PURE__ */ l(m.Body, { children: [
      /* @__PURE__ */ t("div", { className: "card-image medium", children: e != null && e.thumbnail ? /* @__PURE__ */ t(L, { alt: "", src: `${e == null ? void 0 : e.thumbnail}?thumbnail=80x80`, objectFit: "cover", className: "h-full w-100" }) : /* @__PURE__ */ t(U, { app: i, iconFit: "ratio", size: "80", variant: "rounded" }) }),
      /* @__PURE__ */ l("div", { className: "text-truncate", children: [
        /* @__PURE__ */ t(m.Title, { children: e == null ? void 0 : e.name }),
        /* @__PURE__ */ t(m.Text, { children: /* @__PURE__ */ t("em", { children: n }) })
      ] })
    ] }),
    /* @__PURE__ */ l(m.Footer, { children: [
      /* @__PURE__ */ l("div", { className: "d-inline-flex align-items-center gap-8 text-truncate", children: [
        u ? /* @__PURE__ */ t(q, { alt: (e == null ? void 0 : e.creatorName) || "", size: "xs", src: u, variant: "circle", width: "24", height: "24" }) : /* @__PURE__ */ t(de, {}),
        /* @__PURE__ */ t(m.Text, { children: e == null ? void 0 : e.creatorName })
      ] }),
      /* @__PURE__ */ l("div", { className: "d-inline-flex align-items-center gap-8", children: [
        S && /* @__PURE__ */ t(F, { message: c("tooltip.shared", {
          ns: a
        }), placement: "top", children: /* @__PURE__ */ t(se, { width: 16, height: 16 }) }),
        N && /* @__PURE__ */ t(F, { message: c("tooltip.public", {
          ns: a
        }), placement: "top", children: /* @__PURE__ */ t(ne, { width: 16, height: 16 }) })
      ] })
    ] })
  ] }) }) });
};
k.displayName = "ResourceCard";
const ue = ({
  data: i,
  fetchNextPage: e
}) => {
  const {
    currentApp: n
  } = T(), {
    t: b
  } = z(), {
    fromNow: w
  } = J(), p = Y(), r = Z(), s = ee(), {
    setSelectedResources: g,
    setResourceIds: h,
    openResource: v,
    setResourceIsTrash: u
  } = te(), R = B(), y = Q({
    from: {
      opacity: 0
    },
    to: {
      opacity: 1
    }
  }), I = p.pagination.startIdx + p.pagination.pageSize < (p.pagination.maxIdx || 0), d = V(() => {
    e();
  }, []), S = (a) => {
    R ? (u(!0), h([a.id]), g([a])) : v(a);
  };
  async function N(a) {
    if (r.includes(a.id)) {
      h(r.filter((c) => c !== a.id)), g(s.filter((c) => c.id !== a.id));
      return;
    }
    h([...r, a.id]), g([...s, a]);
  }
  const x = W("grid ps-0 list-unstyled");
  return /* @__PURE__ */ l(D.Fragment, { children: [
    /* @__PURE__ */ t(P.ul, { className: x, children: i == null ? void 0 : i.pages.map((a, c) => /* @__PURE__ */ t(D.Fragment, { children: a.resources.map((o) => {
      const {
        id: f,
        updatedAt: M
      } = o, C = w(M);
      return /* @__PURE__ */ t(P.li, { className: "g-col-4", style: {
        position: "relative",
        ...y
      }, children: /* @__PURE__ */ t(k, { app: n, resource: o, time: C, isSelectable: !0, isSelected: r.includes(o.id), onClick: (A) => {
        A.stopPropagation(), S(o);
      }, onSelect: () => N(o) }) }, f);
    }) }, c)) }),
    I && /* @__PURE__ */ t("div", { className: "d-grid gap-2 col-4 mx-auto my-24", children: /* @__PURE__ */ t(K, { type: "button", color: "secondary", variant: "filled", onClick: d, children: b("explorer.see.more") }) })
  ] });
};
export {
  ue as default
};
