import { jsxs as l, jsx as o, Fragment as R } from "react/jsx-runtime";
import { useState as y } from "react";
import { Box as s, Skeleton as w, Typography as F, alpha as C, Stack as j, IconButton as f, Pagination as T } from "@mui/material";
import { useMemoizedFn as L, useReactive as _, useRequest as A, useCreation as D } from "ahooks";
import H from "axios";
import { Icon as h } from "@iconify/react";
import W, { getNFTData as O } from "@arcblock/ux/lib/NFTDisplay";
import U from "@arcblock/ux/lib/Empty";
import { WELLKNOWN_SERVICE_PATH_PREFIX as B } from "@abtnode/constant";
import { translate as M } from "@arcblock/ux/lib/Locale/util";
import { useLocaleContext as V } from "@arcblock/ux/lib/Locale/context";
import { joinURL as v } from "ufo";
import X from "@arcblock/ux/lib/SocialShare";
import { translations as $ } from "../libs/locales.js";
import q from "./nft-preview.js";
const J = (a) => ({
  position: "absolute",
  top: 0,
  left: 0,
  right: 0,
  bottom: 0,
  backgroundColor: "rgba(0, 0, 0, 0.6)",
  opacity: 0,
  transition: "opacity 0.3s ease-in-out",
  display: "flex",
  alignItems: "center",
  justifyContent: "center",
  zIndex: 1,
  "& .mask-item": {
    backgroundColor: C(a.palette.background.paper, 0.9),
    color: "text.primary",
    "&:hover": {
      backgroundColor: C(a.palette.background.paper, 1)
    }
  }
}), P = "https://main.abtnetwork.io/explorer";
function ce({ user: a }) {
  const { locale: N } = V(), u = L((t, e = {}) => M($, t, N, "en", e)), [n, g] = y({
    visible: !1,
    nft: null
  }), [p, x] = y({
    anchorEl: null,
    props: null
  }), S = (t) => {
    const e = v(P, "assets", t);
    window.open(e, "_blank");
  }, z = (t, e) => {
    let i = "";
    typeof e.data?.value == "string" ? i = JSON.parse(e.data?.value)?.domain : i = e.data?.value?.domain, x({
      anchorEl: t,
      props: {
        title: i ? `Hey, I just won an NFT at the ${i} event!` : "Hey, I just won an NFT!",
        url: v(P, "assets", e.address)
      }
    });
  }, E = (t) => {
    g({
      visible: !0,
      nft: t
    });
  }, r = _({
    page: 1,
    size: 20
  }), k = A(
    async (t = r) => (await H.get(`${B}/ocap/listAssets`, {
      params: {
        ownerAddress: a.did,
        ...t
      }
    })).data,
    {
      defaultParams: [r],
      refreshDeps: [a.did, r]
    }
  ), { loading: c, data: d } = k, m = d?.page ?? { cursor: 0, next: !1, total: 0 }, b = (t, e) => {
    r.page = e, k.run(r);
  }, I = D(() => {
    if (c) {
      const t = ["skeleton-1", "skeleton-2", "skeleton-3", "skeleton-4", "skeleton-5"].map((e) => /* @__PURE__ */ o(w, { variant: "rectangular", width: "15%", height: 166, sx: { borderRadius: 1, flexShrink: 0 } }, e));
      return /* @__PURE__ */ l(
        s,
        {
          sx: {
            display: "flex",
            flexDirection: "column",
            gap: 2
          },
          children: [
            /* @__PURE__ */ o(w, { width: "20%" }),
            /* @__PURE__ */ o(
              s,
              {
                sx: {
                  display: "flex",
                  flexDirection: "row",
                  gap: 2,
                  flexWrap: "nowrap"
                },
                children: t
              }
            )
          ]
        }
      );
    }
    return /* @__PURE__ */ l(R, { children: [
      /* @__PURE__ */ o(
        F,
        {
          sx: {
            color: "grey.A700",
            fontWeight: 600,
            mb: 2.5
          },
          children: u("common.nft")
        }
      ),
      d?.assets?.length === 0 && !c && /* @__PURE__ */ o(s, { sx: { display: "flex", justifyContent: "center", alignItems: "center", width: "100%", height: "100%" }, children: /* @__PURE__ */ o(U, { children: u("common.noNFT") }) }),
      /* @__PURE__ */ o(
        s,
        {
          className: "nft-list-wrapper",
          sx: {
            display: "grid",
            justifyItems: "start",
            gridTemplateColumns: {
              xs: "repeat(2, 1fr)",
              sm: "repeat(3, 1fr)",
              md: "repeat(3, 1fr)",
              lg: "repeat(5, 1fr)"
            },
            gap: 2.5
          },
          children: d?.assets?.map((t) => /* @__PURE__ */ l(
            s,
            {
              sx: {
                flexShrink: 0,
                width: { xs: 120, sm: 120, md: 120, lg: 166 },
                height: { xs: 120, sm: 120, md: 120, lg: 166 },
                position: "relative",
                borderRadius: 1,
                overflow: "hidden",
                cursor: "pointer",
                "&:hover .mask": {
                  opacity: 1
                }
              },
              children: [
                /* @__PURE__ */ o(
                  W,
                  {
                    data: O(t),
                    address: t.address,
                    inset: !0,
                    imageFilter: {
                      imageFilter: "resize",
                      w: "500",
                      f: "webp"
                    }
                  }
                ),
                /* @__PURE__ */ o(s, { className: "mask", sx: J, children: /* @__PURE__ */ l(j, { direction: "row", spacing: 1, children: [
                  /* @__PURE__ */ o(
                    f,
                    {
                      size: "small",
                      className: "mask-item",
                      onClick: (e) => {
                        e.stopPropagation(), S(t.address);
                      },
                      children: /* @__PURE__ */ o(h, { icon: "tabler:link", fontSize: 18 })
                    }
                  ),
                  /* @__PURE__ */ o(
                    f,
                    {
                      size: "small",
                      onClick: (e) => {
                        e.stopPropagation(), z(e.currentTarget, t);
                      },
                      className: "mask-item",
                      children: /* @__PURE__ */ o(h, { icon: "tabler:share-2", fontSize: 18 })
                    }
                  ),
                  /* @__PURE__ */ o(
                    f,
                    {
                      size: "small",
                      onClick: (e) => {
                        e.stopPropagation(), E(t);
                      },
                      className: "mask-item",
                      children: /* @__PURE__ */ o(h, { icon: "tabler:eye", fontSize: 18 })
                    }
                  )
                ] }) })
              ]
            },
            t.address
          ))
        }
      ),
      m.next || r.page > 1 ? /* @__PURE__ */ o(
        T,
        {
          sx: {
            display: "flex",
            justifyContent: "center",
            mt: 2
          },
          page: r.page,
          onChange: b,
          count: Math.ceil(m.total / r.size),
          size: "small"
        }
      ) : null,
      /* @__PURE__ */ o(
        q,
        {
          visible: n.visible && !!n.nft,
          nft: n.nft,
          onClose: () => {
            g({ visible: !1, nft: null });
          }
        }
      ),
      /* @__PURE__ */ o(
        X,
        {
          anchorEl: p.anchorEl,
          onClose: () => {
            x({ anchorEl: null, props: null });
          },
          sharedProps: p.props || { title: "", url: "" }
        }
      )
    ] });
  }, [c, m, r.page, r.size, b, p, n]);
  return /* @__PURE__ */ o(s, { sx: { border: "1px solid", borderColor: "divider", borderRadius: 1, p: 2, mb: 5 }, children: I });
}
export {
  ce as default
};
