import { jsx as o, jsxs as r } from "react/jsx-runtime";
import { useState as p } from "react";
import { Dialog as S, DialogTitle as h, Typography as l, DialogContent as C, ImageListItem as b, Stack as y, Box as G, DialogActions as D, Button as v, CircularProgress as w } from "@mui/material";
import { useReactive as k, useCreation as z } from "ahooks";
import u from "prop-types";
import f from "lodash/isUndefined";
import I from "lodash/noop";
import O from "./assets/did-spaces-guide-cover.svg.js";
import j from "./assets/did-spaces-guide-icon.svg.js";
import { useLocale as F } from "../hooks/use-locale.js";
import { t as n } from "../locales/index.js";
import T from "./hooks/use-mobile.js";
function m({ ...d }) {
  const i = Object.assign({}, d);
  f(i.open) && (i.open = !1), f(i.onConnect) && (i.onConnect = I);
  const e = F(), s = T(), t = k({
    loading: !1
  }), c = z(() => [
    n("didSpacesGuide.feature.dataSecurity", e),
    n("didSpacesGuide.feature.dataSharing", e),
    n("didSpacesGuide.feature.dataSync", e),
    n("didSpacesGuide.feature.dataIntegration", e)
  ], []);
  return /* @__PURE__ */ r(
    S,
    {
      disableEscapeKeyDown: !0,
      "aria-labelledby": "alert-dialog-title",
      "aria-describedby": "alert-dialog-description",
      open: i.open,
      children: [
        /* @__PURE__ */ r(h, { id: "alert-dialog-title", children: [
          /* @__PURE__ */ o(
            l,
            {
              sx: {
                fontSize: "20px",
                fontWeight: "500"
              },
              children: n("didSpacesGuide.title", e)
            }
          ),
          /* @__PURE__ */ o(
            l,
            {
              sx: {
                fontSize: "14px",
                fontWeight: "300",
                color: "#9397A1"
              },
              children: n("didSpacesGuide.description", e)
            }
          )
        ] }),
        /* @__PURE__ */ r(C, { sx: { padding: "12px 20px !important" }, children: [
          /* @__PURE__ */ o(b, { sx: { width: "100%" }, children: /* @__PURE__ */ o(O, { style: { width: "100%", height: s ? "100%" : "167px" } }) }),
          /* @__PURE__ */ o(
            y,
            {
              direction: "row",
              sx: {
                justifyContent: "space-between",
                width: "100%",
                padding: "16px",
                mt: 1,
                backgroundColor: "#F6F6F6",
                borderRadius: "8px"
              },
              children: c.map((a) => /* @__PURE__ */ r(G, { sx: { display: "flex", flex: 1, padding: "auto 16px" }, children: [
                /* @__PURE__ */ o(j, { size: "16px" }),
                /* @__PURE__ */ o(
                  l,
                  {
                    variant: "body1",
                    sx: {
                      marginLeft: "1.5px",
                      color: "#030712",
                      fontFamily: "Helvetica Neue",
                      fontSize: "12px",
                      fontStyle: "normal",
                      fontWeight: "400",
                      lineHeight: "normal",
                      letterSpacing: "-0.12px"
                    },
                    children: a
                  }
                )
              ] }, a))
            }
          )
        ] }),
        /* @__PURE__ */ o(D, { children: /* @__PURE__ */ r(
          v,
          {
            variant: "contained",
            size: "small",
            onClick: () => {
              t.loading = !0, i.onConnect(() => {
                t.loading = !1;
              });
            },
            sx: {
              boxShadow: "none"
            },
            disabled: t.loading,
            children: [
              t.loading ? /* @__PURE__ */ o(w, { color: "inherit", size: 12, sx: { mr: 1 } }) : null,
              n("didSpacesGuide.connectNow", e)
            ]
          }
        ) })
      ]
    }
  );
}
m.propTypes = {
  open: u.bool,
  onConnect: u.func
};
function U(d = {}) {
  const [i, e] = p(!1), [s, t] = p(() => {
  }), c = () => {
    e(!0);
  }, a = () => {
    e(!1);
  }, g = (x) => {
    t(() => x);
  };
  return {
    DidSpacesGuideView: /* @__PURE__ */ o(m, { ...d, open: i, onConnect: s }),
    didSpacesGuideApi: { open: c, close: a, onConnect: g }
  };
}
export {
  U as default
};
