import { jsxs as s, jsx as e } from "react/jsx-runtime";
import { useLocaleContext as m } from "@arcblock/ux/lib/Locale/context";
import { Box as t, Typography as d } from "@mui/material";
import { DIDSpaceConnect as p, DIDSpaceConnection as x } from "@blocklet/did-space-react";
import { useConfigUserSpaceContext as a } from "../../../contexts/config-user-space.js";
import u from "./action.js";
import g from "../../../hooks/use-mobile.js";
function I({ spaceGateway: o }) {
  const { t: l } = m(), { updateSpaceGateway: f, session: n } = a(), r = g(), c = ({ spaceGateway: i }) => f(i);
  return /* @__PURE__ */ s(
    t,
    {
      sx: {
        display: "flex",
        flexDirection: "column"
      },
      children: [
        /* @__PURE__ */ s(
          t,
          {
            sx: {
              display: "flex",
              flexDirection: "row",
              alignItems: "center",
              justifyContent: "space-between",
              marginBottom: "12px"
            },
            children: [
              /* @__PURE__ */ e(
                d,
                {
                  sx: {
                    fontSize: "16px",
                    fontWeight: "bold"
                  },
                  children: l("storage.spaces.connected.title")
                }
              ),
              !r && /* @__PURE__ */ e(p, { connectScope: "user", session: n, onSuccess: c })
            ]
          }
        ),
        /* @__PURE__ */ e(t, { children: o && /* @__PURE__ */ e(
          x,
          {
            endpoint: o.endpoint,
            deps: [o],
            selected: !0,
            footer: !0,
            action: (i) => /* @__PURE__ */ e(u, { session: n, ...i })
          },
          o.endpoint
        ) }),
        r && /* @__PURE__ */ e(t, { sx: { display: "flex", alignItems: "center", justifyContent: "center", marginTop: 2 }, children: /* @__PURE__ */ e(p, { connectScope: "user", session: n, onSuccess: c }) })
      ]
    }
  );
}
export {
  I as default
};
