import { jsxs as i, jsx as t, Fragment as $ } from "react/jsx-runtime";
import A from "prop-types";
import { useState as v, useRef as Y, useMemo as E, useEffect as ee } from "react";
import { useMemoizedFn as k, useRequest as te, useDebounce as re, useInfiniteScroll as oe } from "ahooks";
import { WELLKNOWN_SERVICE_PATH_PREFIX as ne } from "@abtnode/constant";
import { Box as r, Button as P, Avatar as w, Typography as s, Menu as ie, TextField as se, InputAdornment as ae, Divider as W, MenuItem as L, ListItemAvatar as R, ListItemText as D } from "@mui/material";
import { withQuery as le, joinURL as ce } from "ufo";
import { KeyboardArrowDown as de, Search as pe, Add as he, OpenInNew as me } from "@mui/icons-material";
import { translate as ue } from "@arcblock/ux/lib/Locale/util";
import ge from "./use-org.js";
import xe from "./create.js";
import fe from "./locales.js";
const H = 20;
function ye({ session: a, locale: h = "en" }) {
  const [S, C] = v(null), [m, I] = v(""), [j, u] = v(!1), F = Y(null), l = k((e, o = {}) => ue(fe, e, h, "en", o)), { getOrgs: N, getCurrentOrg: _ } = ge(a), n = E(() => a?.user?.role || "", [a?.user?.role]), { data: g = {} } = te(
    () => _(n),
    {
      ready: !!n,
      refreshDeps: [n],
      onError: (e) => {
        console.error("Failed to get organization role", e);
      }
    }
  ), d = E(() => g || {
    name: a?.user?.passports?.find((o) => o.name === n)?.title || n || "-"
  }, [g, n, a?.user?.passports]), B = re(m, { wait: 500 }), { data: K, loadMore: V, loadingMore: z, reload: O } = oe(
    async (e) => {
      const c = { page: e ? Math.ceil(e.list.length / H) + 1 : 1, pageSize: H, search: m }, y = await N(c), { orgs: b = [], paging: Z } = y || {};
      return { list: b, total: Z?.total || 0 };
    },
    {
      ready: !!n,
      reloadDeps: [B],
      isNoMore: (e) => e?.list.length ? e.list.length >= e?.total : !0,
      onError: (e) => {
        console.error("Failed to fetch organizations list", e);
      }
    }
  ), { list: p = [], total: q = 0 } = K || {}, T = p.length < q, U = k((e) => {
    const o = e.target, { scrollTop: c, scrollHeight: y, clientHeight: b } = o;
    y - c - b < 50 && !z && T && V();
  }), x = !!S;
  ee(() => {
    x && O();
  }, [x, O]);
  const G = (e) => {
    C(e.currentTarget);
  }, f = () => {
    C(null), u(!1), I("");
  }, J = (e) => {
    a.switchPassport(
      () => {
        window.location.reload();
      },
      { orgId: e.id }
    ), f();
  }, Q = () => {
    u(!0);
  }, M = () => {
    const e = le(ce(ne, "user/orgs"), { locale: h });
    window.location.href = e, f();
  }, X = (e) => /* @__PURE__ */ i(
    L,
    {
      onClick: () => J(e),
      selected: e.id === d.id,
      sx: {
        py: 1.5,
        px: 2,
        "&.Mui-selected": {
          backgroundColor: "action.selected",
          "&:hover": {
            backgroundColor: "action.hover"
          }
        }
      },
      children: [
        /* @__PURE__ */ t(R, { sx: { minWidth: 40 }, children: /* @__PURE__ */ t(
          w,
          {
            sx: {
              width: 28,
              height: 28,
              fontSize: 14,
              bgcolor: e.isOwner ? "primary.main" : "grey.400"
            },
            children: e.name?.[0]
          }
        ) }),
        /* @__PURE__ */ i(r, { sx: { display: "flex", alignItems: "center", flex: 1 }, children: [
          /* @__PURE__ */ t(
            D,
            {
              sx: {
                "& .MuiListItemText-primary": {
                  mb: 0
                },
                "& .MuiListItemText-secondary": {
                  mt: "-2px"
                }
              },
              primary: /* @__PURE__ */ t(s, { variant: "body2", sx: { fontWeight: 500, lineHeight: 1.2 }, children: e.name }),
              secondary: /* @__PURE__ */ t(s, { variant: "caption", color: "text.secondary", sx: { lineHeight: 1.1 }, children: e.passports?.[0]?.title })
            }
          ),
          e.id === d.id && /* @__PURE__ */ t(r, { sx: { display: "flex", alignItems: "center", justifyContent: "center", ml: 1 }, children: /* @__PURE__ */ t(s, { variant: "caption", color: "primary", sx: { fontSize: 10 }, children: "✓" }) })
        ] })
      ]
    },
    e.id
  );
  return /* @__PURE__ */ i(r, { children: [
    /* @__PURE__ */ i(
      P,
      {
        ref: F,
        onClick: G,
        endIcon: /* @__PURE__ */ t(de, {}),
        sx: {
          display: "flex",
          alignItems: "center",
          gap: 1,
          px: 2,
          py: 1,
          borderRadius: 1,
          textTransform: "none",
          color: "text.primary",
          "&:hover": {
            backgroundColor: "action.hover"
          }
        },
        "data-testid": "org-switch-button",
        children: [
          /* @__PURE__ */ t(
            w,
            {
              sx: {
                width: 24,
                height: 24,
                fontSize: 12,
                bgcolor: "primary.main"
              },
              children: d.name?.[0]
            }
          ),
          /* @__PURE__ */ t(s, { variant: "body2", sx: { fontWeight: 500 }, children: d.name })
        ]
      }
    ),
    /* @__PURE__ */ i(
      ie,
      {
        anchorEl: S,
        open: x,
        onClose: f,
        anchorOrigin: {
          vertical: "bottom",
          horizontal: "left"
        },
        transformOrigin: {
          vertical: "top",
          horizontal: "left"
        },
        PaperProps: {
          sx: {
            width: 340,
            maxHeight: 480,
            overflow: "visible",
            mt: 0.5,
            borderRadius: 2,
            boxShadow: "0px 4px 20px rgba(0, 0, 0, 0.08)",
            border: (e) => `1px solid ${e.palette.divider}`
          }
        },
        MenuListProps: {
          sx: { py: 0 }
        },
        children: [
          /* @__PURE__ */ t(r, { sx: { p: 1.5, pb: 1 }, children: /* @__PURE__ */ t(
            se,
            {
              fullWidth: !0,
              size: "small",
              placeholder: l("search"),
              value: m,
              onChange: (e) => I(e.target.value),
              InputProps: {
                startAdornment: /* @__PURE__ */ t(ae, { position: "start", children: /* @__PURE__ */ t(pe, { fontSize: "small", color: "action" }) })
              },
              onClick: (e) => e.stopPropagation(),
              onKeyDown: (e) => e.stopPropagation(),
              sx: {
                "& .MuiOutlinedInput-root": {
                  borderRadius: 1
                }
              }
            }
          ) }),
          /* @__PURE__ */ t(r, { sx: { px: 2, pb: 1 }, children: /* @__PURE__ */ t(
            s,
            {
              variant: "subtitle2",
              color: "text.secondary",
              sx: {
                fontSize: 11,
                fontWeight: 600,
                textTransform: "uppercase",
                letterSpacing: 0.5
              },
              children: l("orgs")
            }
          ) }),
          /* @__PURE__ */ t(r, { sx: { maxHeight: 240, overflow: "auto" }, onScroll: U, children: p.length > 0 ? /* @__PURE__ */ t($, { children: p.map((e, o) => {
            const c = o === p.length - 1;
            return /* @__PURE__ */ i(r, { children: [
              X(e),
              c && T && /* @__PURE__ */ t(
                r,
                {
                  sx: {
                    display: "flex",
                    justifyContent: "center",
                    py: 1,
                    color: "text.secondary",
                    fontSize: "0.875rem"
                  },
                  children: z ? l("loadingMore") : ""
                }
              )
            ] }, e.id);
          }) }) : /* @__PURE__ */ t(r, { sx: { px: 2, py: 3, textAlign: "center" }, children: /* @__PURE__ */ t(s, { variant: "body2", color: "text.secondary", children: l("myJoinedEmpty") }) }) }),
          /* @__PURE__ */ t(W, {}),
          /* @__PURE__ */ i(
            L,
            {
              onClick: Q,
              sx: {
                py: 1.5,
                px: 2,
                "&:hover": {
                  backgroundColor: "action.hover"
                }
              },
              children: [
                /* @__PURE__ */ t(R, { sx: { minWidth: 40 }, children: /* @__PURE__ */ t(
                  w,
                  {
                    sx: {
                      width: 28,
                      height: 28,
                      bgcolor: "success.main",
                      color: "success.contrastText"
                    },
                    children: /* @__PURE__ */ t(he, { fontSize: "small" })
                  }
                ) }),
                /* @__PURE__ */ t(
                  D,
                  {
                    primary: /* @__PURE__ */ t(s, { variant: "body2", sx: { fontWeight: 500 }, children: l("createNew") })
                  }
                )
              ]
            }
          ),
          /* @__PURE__ */ t(W, {}),
          /* @__PURE__ */ t(r, { sx: { p: 1.5 }, children: /* @__PURE__ */ t(
            P,
            {
              onClick: M,
              variant: "text",
              component: "a",
              size: "small",
              endIcon: /* @__PURE__ */ t(me, { fontSize: "small" }),
              sx: {
                color: "primary.main",
                fontWeight: 500,
                p: 0,
                fontSize: 14,
                minWidth: "auto",
                "&:hover": {
                  backgroundColor: "transparent",
                  textDecoration: "underline"
                }
              },
              children: l("viewAll")
            }
          ) })
        ]
      }
    ),
    j && /* @__PURE__ */ t(xe, { onSuccess: M, onCancel: () => u(!1), locale: h })
  ] });
}
ye.propTypes = {
  session: A.object.isRequired,
  locale: A.string
};
export {
  ye as default
};
