import { jsx as e, jsxs as t, Fragment as d } from "react/jsx-runtime";
import { Box as i, Typography as p, Chip as g, List as R, ListItem as x, Button as q } from "@mui/material";
import { Icon as u } from "@iconify/react";
import D from "@iconify-icons/tabler/external-link";
import L from "@iconify-icons/material-symbols/lock-outline";
import B from "@iconify-icons/material-symbols/check-circle";
import w from "@iconify-icons/material-symbols/rocket-launch-rounded";
import { useReactive as F, useMemoizedFn as s } from "ahooks";
import { memo as U, useRef as j, useImperativeHandle as M } from "react";
import y from "lodash/noop";
import { translate as W } from "../Locale/util.js";
import Y from "./did-connect-container.js";
import _ from "../CloseButton/index.js";
import H from "../SharedBridge/index.js";
import { setVisitorId as O } from "../Util/index.js";
const P = {
  en: {
    allow: "Allow",
    dataUsage: "Your data is only used for identity authentication, and will not be collected or used for any other purpose.",
    title: "Authorization Request",
    clickAllow: ({ allowButton: r }) => /* @__PURE__ */ t(d, { children: [
      "You only need to click the ",
      r,
      " button below, and you will not see this request again."
    ] }),
    reason: ({ site: r }) => /* @__PURE__ */ t(d, { children: [
      "For a better login experience, we need to apply for the storage permission of the ",
      r,
      " site."
    ] }),
    afterAllow: {
      title: "After authorization, you will enjoy:",
      list1: "More convenient login experience",
      list2: "Faster access speed"
    }
  },
  zh: {
    allow: "允许",
    dataUsage: "您的数据仅用于身份认证，不会被收集或用于其他用途。",
    title: "授权请求",
    clickAllow: ({ allowButton: r }) => /* @__PURE__ */ t(d, { children: [
      "您只需要点击下方的 ",
      r,
      " 按钮，后续将不会再看到这个请求。"
    ] }),
    reason: ({ site: r }) => /* @__PURE__ */ t(d, { children: [
      "为了让您获得更好的登录体验，我们需要申请 ",
      r,
      " 站点存储权限。"
    ] }),
    afterAllow: {
      title: "授权后，您将享受：",
      list1: "更便捷的登录体验",
      list2: "更快的访问速度"
    }
  }
};
function T({
  ref: r = void 0,
  locale: b = "en",
  src: c,
  storageAccessState: m
}) {
  const f = j(null), o = F({
    callback: y,
    open: !1,
    get origin() {
      try {
        return new URL(c).origin;
      } catch {
        return c;
      }
    },
    get host() {
      try {
        return new URL(c).host;
      } catch {
        return c;
      }
    }
  }), l = s((n, a = {}) => W(P, n, b, "en", a)), k = s(() => {
    o.open = !1, o.callback = y;
  }), A = s(() => {
    o.open = !0;
  }), I = s(() => {
    o.open = !1;
  }), v = s(
    async (n) => {
      (await f.current?.callIframe("requestStorageAccess")).value ? n(!0, "broswer") : m === void 0 ? n(!1, "system") : m === "denied" ? n(!1) : (o.open = !0, o.callback = n);
    }
  ), C = s(() => new Promise((n) => {
    v((a, S) => {
      k(), n({ value: a, origin: S });
    });
  })), z = s(() => {
    o.open = !1;
  }), h = s(() => {
    o.open = !1, o.callback(!1, "system");
  });
  return M(r, () => ({
    open: A,
    close: I,
    requestStorageAccess: C
  })), /* @__PURE__ */ e(Y, { popup: !0, open: o.open, onClose: h, keepMounted: !0, children: /* @__PURE__ */ t(
    i,
    {
      sx: {
        backgroundColor: "background.default",
        display: "flex",
        flexDirection: "column",
        height: "100%",
        position: "relative",
        maxWidth: "100%",
        transition: "width 0.2s ease-in-out",
        margin: "auto",
        p: 3,
        gap: 2
      },
      children: [
        /* @__PURE__ */ e(
          _,
          {
            onClose: h,
            sx: {
              position: "absolute",
              right: 14,
              top: 14
            }
          }
        ),
        /* @__PURE__ */ t(
          p,
          {
            component: "div",
            variant: "h4",
            sx: {
              fontWeight: 700,
              fontFamily: "Lexend",
              display: "flex",
              alignItems: "center",
              gap: 1
            },
            children: [
              /* @__PURE__ */ e(
                i,
                {
                  component: u,
                  icon: L,
                  sx: {
                    fontSize: 28,
                    color: "warning.main"
                  }
                }
              ),
              l("title")
            ]
          }
        ),
        /* @__PURE__ */ t(i, { sx: { display: "flex", flexDirection: "column", gap: 1 }, children: [
          /* @__PURE__ */ e(p, { children: l("reason", {
            site: /* @__PURE__ */ e(
              g,
              {
                clickable: !0,
                component: "a",
                href: o.origin,
                label: o.host,
                size: "small",
                deleteIcon: /* @__PURE__ */ e(u, { icon: D }),
                onDelete: () => {
                },
                target: "_blank"
              }
            )
          }) }),
          /* @__PURE__ */ e(p, { component: "div", children: l("clickAllow", {
            allowButton: /* @__PURE__ */ e(g, { label: l("allow"), size: "small", color: "success" })
          }) }),
          /* @__PURE__ */ t(i, { sx: { mt: 2 }, children: [
            /* @__PURE__ */ t(p, { sx: { display: "flex", alignItems: "center", gap: 1, mb: 0.5 }, children: [
              /* @__PURE__ */ e(
                i,
                {
                  component: u,
                  icon: B,
                  sx: {
                    fontSize: 24,
                    color: "success.main"
                  }
                }
              ),
              l("afterAllow.title")
            ] }),
            /* @__PURE__ */ t(R, { dense: !0, sx: { py: 0, pl: 2 }, children: [
              /* @__PURE__ */ t(x, { sx: { display: "flex", alignItems: "center", gap: 0.8 }, children: [
                /* @__PURE__ */ e(
                  i,
                  {
                    component: u,
                    icon: w,
                    sx: {
                      fontSize: 20,
                      color: "success.main"
                    }
                  }
                ),
                l("afterAllow.list1")
              ] }),
              /* @__PURE__ */ t(x, { sx: { display: "flex", alignItems: "center", gap: 0.8 }, children: [
                /* @__PURE__ */ e(
                  i,
                  {
                    component: u,
                    icon: w,
                    sx: {
                      fontSize: 20,
                      color: "success.main"
                    }
                  }
                ),
                l("afterAllow.list2")
              ] })
            ] })
          ] }),
          /* @__PURE__ */ e(
            p,
            {
              component: "div",
              variant: "body2",
              sx: {
                color: "grey.700"
              },
              children: l("dataUsage")
            }
          )
        ] }),
        /* @__PURE__ */ e(i, { sx: { display: "flex", justifyContent: "center" }, children: /* @__PURE__ */ t(i, { sx: { position: "relative", display: "inline-block", cursor: "pointer" }, children: [
          /* @__PURE__ */ e(q, { variant: "contained", color: "success", onClick: z, sx: { minWidth: 100, letterSpacing: 1 }, children: l("allow") }),
          /* @__PURE__ */ e(
            H,
            {
              ref: f,
              onClick: ({ value: n, visitorId: a }) => {
                a && O(a), o.callback(n, "broswer");
              },
              src: c,
              sx: {
                zIndex: 1
              }
            }
          )
        ] }) })
      ]
    }
  ) });
}
const le = U(T);
export {
  le as default
};
