import { jsx as e } from "react/jsx-runtime";
import { useRef as D, useState as G, useEffect as S } from "react";
import { Link as p } from "react-router-dom";
import { useMemoizedFn as v, useCreation as B } from "ahooks";
import { Box as g, useTheme as E } from "@mui/material";
import T from "./sub-item-group.js";
import { Item as F } from "./nav-menu.js";
import { styled as C } from "../Theme/index.js";
import { useNavMenuContext as L } from "./nav-menu-context.js";
import { translate as _ } from "../Locale/util.js";
import { useLocaleContext as K } from "../Locale/context.js";
import M from "./images/nft-studio.svg.js";
import O from "./images/creator-studio.svg.js";
import P from "./images/blocklet-launcher.svg.js";
import R from "./images/blocklet-store.svg.js";
import H from "./images/web3-kit.svg.js";
import z from "./images/blocklet-framework.svg.js";
import V from "./images/abt-network.svg.js";
import j from "./images/blocklet-server.svg.js";
import q from "./images/OCAP.svg.js";
import U from "./images/did.svg.js";
import J from "./images/did-wallet.svg.js";
import Q from "./images/vc.svg.js";
import X from "./images/payment-kit.png";
import Y from "./images/aigne.svg.js";
import A from "./images/arcsphere.svg.js";
import Z from "./images/aistro.png";
const I = 260, ee = {
  en: {
    groups: {
      applications: "Applications",
      components: "Components",
      computeStorage: "Compute/Storage",
      identity: "Identity",
      frameworkTools: "Framework & tools",
      modelsAdapters: "Models adapters"
    },
    products: {
      nftStudio: {
        description: "Mint and manage NFTs"
      },
      creatorStudio: {
        description: "All-in-one creator tool"
      },
      aigne: {
        description: "The Agentic Ecosystem for AI Apps"
      },
      arcsphere: {
        description: "AI native browser"
      },
      aistro: {
        description: "AI-powered astrology"
      },
      blockletLauncher: {
        description: "One-click app launcher"
      },
      aiKit: {
        description: "Boost apps with AI"
      },
      paymentKit: {
        description: "Effortless Crypto & Card Payments"
      },
      blockletStore: {
        description: "Discover & deploy apps"
      },
      web3Kit: {
        description: "Web3 dev toolkit"
      },
      blockletFramework: {
        description: "Build and run blocklets"
      },
      didSpaces: {
        description: "Secure personal storage"
      },
      abtNetwork: {
        description: "Fast blockchain network"
      },
      blockletServer: {
        description: "Host your apps easily"
      },
      ocap: {
        description: "Multi-chain connector"
      },
      did: {
        description: "Self-sovereign ID"
      },
      didWallet: {
        description: "Smart digital wallet"
      },
      didNameService: {
        description: "Web3 domain names"
      },
      vc: {
        description: "Verifiable Credentials"
      },
      didConnect: {
        description: "Passwordless login"
      },
      aigneCodeSmith: {
        description: "Review and improve your code with AI"
      },
      aigneDocSmith: {
        description: "Generate and update docs with AI"
      },
      aigneWebSmith: {
        description: "Build and deploy AI-powered web apps"
      },
      aigneCLI: {
        description: "Develop agents from the command line"
      },
      aigneObservability: {
        description: "Understand and inspect agent behavior"
      },
      aigneStudio: {
        description: "Create agents visually, no code needed"
      },
      aigneFramework: {
        description: "The functional core of agentic AI"
      },
      aigneHub: {
        description: "One API. Any Model"
      }
    }
  },
  zh: {
    groups: {
      applications: "应用",
      components: "组件",
      computeStorage: "计算/存储",
      identity: "身份",
      frameworkTools: "框架与工具",
      modelsAdapters: "模型适配器"
    },
    products: {
      nftStudio: {
        description: "铸造和管理 NFT"
      },
      creatorStudio: {
        description: "一体化创作工具"
      },
      aigne: {
        description: "AI 应用的代理生态系统"
      },
      arcsphere: {
        description: "AI 原生浏览器"
      },
      aistro: {
        description: "AI 占星术"
      },
      blockletLauncher: {
        description: "一键启动应用程序"
      },
      aiKit: {
        description: "AI 赋能应用"
      },
      paymentKit: {
        description: "便捷的加密货币和银行卡支付"
      },
      blockletStore: {
        description: "发现和部署应用程序"
      },
      web3Kit: {
        description: "Web3 开发工具包"
      },
      blockletFramework: {
        description: "构建并运行 Blocklet"
      },
      didSpaces: {
        description: "安全的个人存储"
      },
      abtNetwork: {
        description: "快速区块链网络"
      },
      blockletServer: {
        description: "轻松托管应用程序"
      },
      ocap: {
        description: "多链连接器"
      },
      did: {
        description: "自主身份"
      },
      didWallet: {
        description: "智能数字钱包"
      },
      didNameService: {
        description: "Web3 域名"
      },
      vc: {
        description: "可验证凭证"
      },
      didConnect: {
        description: "无密码登录"
      },
      aigneCodeSmith: {
        description: "使用 AI 审查并优化你的代码"
      },
      aigneDocSmith: {
        description: "用 AI 生成和更新项目文档"
      },
      aigneWebSmith: {
        description: "构建并部署 AI 驱动的 Web 应用"
      },
      aigneCLI: {
        description: "通过命令行开发 Agent"
      },
      aigneObservability: {
        description: "理解并分析 Agent 的行为"
      },
      aigneStudio: {
        description: "零代码构建 Agent"
      },
      aigneFramework: {
        description: "Agent AI 的功能核心框架"
      },
      aigneHub: {
        description: "一套 API，连接所有模型"
      }
    }
  }
}, oe = C(g)`
  padding: 8px;
  background: ${({ theme: i }) => i.palette.grey[100]};
  border-radius: 8px;

  &.is-inline {
    width: 100%;
    max-width: 100%;
    border-radius: 0;
    .nav-menu-sub-item-group {
      padding: 8px 16px;
      border-radius: 0;
    }
  }

  .nav-menu-sub-item-group + .nav-menu-sub-item-group {
    margin-top: 8px;
  }
  .MuiGrid-container + .MuiGrid-container {
    margin-top: 0px;
  }
`, te = C(g, { shouldForwardProp: (i) => i !== "maxContent" })(
  ({ theme: i, maxContent: c }) => ({
    display: "grid",
    gap: i.spacing(1),
    gridTemplateColumns: `repeat(1, ${c}px)`,
    [i.breakpoints.up("md")]: {
      gridTemplateColumns: `repeat(2, ${c}px)`
    },
    [i.breakpoints.up("lg")]: {
      gridTemplateColumns: `repeat(3, ${c}px)`
    }
  })
);
function y({ color: i = "black", backgroundColor: c = "transparent", children: l }) {
  return /* @__PURE__ */ e(
    g,
    {
      component: "span",
      sx: {
        display: "inline-flex",
        alignItems: "center",
        justifyContent: "center",
        color: i,
        backgroundColor: c,
        borderRadius: "4px"
      },
      children: l
    }
  );
}
function w({ color: i = "black", backgroundColor: c = "transparent" }) {
  return /* @__PURE__ */ e(y, { color: i, backgroundColor: c, children: /* @__PURE__ */ e(U, { style: { width: "100%" } }) });
}
function d({ color: i = "black", backgroundColor: c = "transparent" }) {
  return /* @__PURE__ */ e(y, { color: i, backgroundColor: c, children: /* @__PURE__ */ e(Y, { style: { width: "100%", height: "100%" } }) });
}
const N = (i) => {
  try {
    return new URL(i).origin !== window.location.origin;
  } catch {
    return !1;
  }
};
function t({ to: i, children: c, className: l = "", ...u }) {
  return N(i) ? /* @__PURE__ */ e(p, { to: i, target: "_blank", rel: "noreferrer noopener", className: l, ...u, children: c }) : /* @__PURE__ */ e(p, { to: i, className: l, ...u, children: c });
}
function De({ className: i = "", type: c, ...l }) {
  const { mode: u } = L(), f = E(), { locale: r = "en" } = K() || {}, a = D(null), { palette: k } = f, o = v((n, s = {}) => _(ee, n, r, "en", s)), [x, W] = G(I), m = v(() => {
    if (!a.current) return;
    const n = a.current.querySelectorAll(".navmenu-item__content");
    let s = I;
    n.forEach((b) => {
      const h = b.getBoundingClientRect().width + 64;
      h > s && (s = h);
    }), W(s);
  });
  S(() => {
    m();
  }, [f, r, c, m]), S(() => {
    if (!a.current) return;
    const n = a.current.querySelector(".navmenu-item__content");
    if (!n) return;
    const s = new ResizeObserver(() => {
      m();
    });
    return s.observe(n), () => {
      s.disconnect();
    };
  }, [m]);
  const $ = B(() => {
    if (c === "ARCBLOCK")
      return [
        {
          type: "Group",
          label: o("groups.applications"),
          children: [
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.nftstudio.rocks/${r}`, children: "NFT Studio" }),
              description: o("products.nftStudio.description"),
              icon: /* @__PURE__ */ e(M, {})
            },
            {
              label: /* @__PURE__ */ e(
                p,
                {
                  to: `https://www.arcblock.io/content/collections/${r}/creator-studio`,
                  target: "_blank",
                  rel: "noreferrer noopener",
                  children: "Creator Studio"
                }
              ),
              description: o("products.creatorStudio.description"),
              icon: /* @__PURE__ */ e(O, {})
            },
            {
              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/", children: "AIGNE" }),
              description: o("products.aigne.description"),
              icon: /* @__PURE__ */ e(d, { color: k.mode === "dark" ? "white" : "black" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${r}`, children: "ArcSphere" }),
              description: o("products.arcsphere.description"),
              icon: /* @__PURE__ */ e(A, {})
            }
          ]
        },
        {
          type: "Group",
          label: o("groups.components"),
          children: [
            {
              label: /* @__PURE__ */ e(t, { to: `https://launcher.arcblock.io/${r}`, children: "Blocklet Launcher" }),
              description: o("products.blockletLauncher.description"),
              icon: /* @__PURE__ */ e(P, {})
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${r}/payment-kit`, children: "Payment Kit" }),
              description: o("products.paymentKit.description"),
              icon: /* @__PURE__ */ e("img", { src: X, alt: "Payment Kit" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://store.blocklet.dev/?locale=${r}`, children: "Blocklet Store" }),
              description: o("products.blockletStore.description"),
              icon: /* @__PURE__ */ e(R, {})
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.web3kit.rocks/${r}`, children: "Web3 Kit" }),
              description: o("products.web3Kit.description"),
              icon: /* @__PURE__ */ e(H, {})
            }
          ]
        },
        {
          type: "Group",
          label: o("groups.computeStorage"),
          children: [
            {
              label: /* @__PURE__ */ e(
                p,
                {
                  to: `https://www.arcblock.io/content/collections/${r}/blocklet`,
                  target: "_blank",
                  rel: "noreferrer noopener",
                  children: "Blocklet Framework"
                }
              ),
              description: o("products.blockletFramework.description"),
              icon: /* @__PURE__ */ e(z, {})
            },
            {
              label: /* @__PURE__ */ e(p, { to: `https://www.didspaces.com/${r}`, target: "_blank", rel: "noreferrer noopener", children: "DID Spaces" }),
              description: o("products.didSpaces.description"),
              icon: /* @__PURE__ */ e(w, { color: "#876bf4" })
            },
            {
              label: /* @__PURE__ */ e(p, { to: "https://main.abtnetwork.io/", target: "_blank", rel: "noreferrer noopener", children: "ABT Network" }),
              description: o("products.abtNetwork.description"),
              icon: /* @__PURE__ */ e(V, {})
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.blocklet.io/${r}/blocklet-server`, children: "Blocklet Server" }),
              description: o("products.blockletServer.description"),
              icon: /* @__PURE__ */ e(j, {})
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${r}/ocap`, children: "ОСАР" }),
              description: o("products.ocap.description"),
              icon: /* @__PURE__ */ e(q, {})
            }
          ]
        },
        {
          type: "Group",
          label: o("groups.identity"),
          children: [
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${r}/did`, children: "DID" }),
              description: o("products.did.description"),
              icon: /* @__PURE__ */ e(w, { color: "#5b96f3" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.didwallet.io/${r}`, children: "DID Wallet" }),
              description: o("products.didWallet.description"),
              icon: /* @__PURE__ */ e(J, {})
            },
            {
              label: /* @__PURE__ */ e(p, { to: `https://www.didnames.io/${r}`, target: "_blank", rel: "noreferrer noopener", children: "DID Names" }),
              description: o("products.didNameService.description"),
              icon: /* @__PURE__ */ e(w, { color: "#678ab0" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.arcblock.io/content/collections/${r}/verifiable-credential`, children: "VC" }),
              description: o("products.vc.description"),
              icon: /* @__PURE__ */ e(Q, {})
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.didconnect.io/${r}`, children: "DID Connect" }),
              description: o("products.didConnect.description"),
              icon: /* @__PURE__ */ e(w, { color: "#5bbec5" })
            }
          ]
        }
      ];
    if (c === "AIGNE") {
      const n = {
        onClick: (s) => {
          s.preventDefault();
          const b = s.currentTarget.href, h = N(b) ? "_blank" : "_self";
          window.open(b, h);
        }
      };
      return [
        {
          type: "Group",
          label: o("groups.applications"),
          children: [
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.arcsphere.io/${r}`, children: "ArcSphere" }),
              description: o("products.arcsphere.description"),
              icon: /* @__PURE__ */ e(A, {})
            },
            {
              label: /* @__PURE__ */ e(t, { to: `https://www.aistro.io/${r}`, children: "Aistro" }),
              description: o("products.aistro.description"),
              icon: /* @__PURE__ */ e("img", { src: Z, alt: "Aistro" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/code-smith", ...n, children: "AIGNE CodeSmith" }),
              description: o("products.aigneCodeSmith.description"),
              icon: /* @__PURE__ */ e(d, { color: "#56a596", backgroundColor: "#e9fcf6" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/doc-smith", ...n, children: "AIGNE DocSmith" }),
              description: o("products.aigneDocSmith.description"),
              icon: /* @__PURE__ */ e(d, { color: "#e46f38", backgroundColor: "#f7e0d7" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/web-smith", ...n, children: "AIGNE WebSmith" }),
              description: o("products.aigneWebSmith.description"),
              icon: /* @__PURE__ */ e(d, { color: "#7c45eb", backgroundColor: "#f0e9ff" })
            }
          ]
        },
        {
          type: "Group",
          label: o("groups.frameworkTools"),
          children: [
            {
              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/cli", ...n, children: "AIGNE CLI" }),
              description: o("products.aigneCLI.description"),
              icon: /* @__PURE__ */ e(d, { color: "#d05d4e", backgroundColor: "#faeaea" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/observability", ...n, children: "AIGNE Observability" }),
              description: o("products.aigneObservability.description"),
              icon: /* @__PURE__ */ e(d, { color: "#6ba456", backgroundColor: "#edfae8" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/studio", ...n, children: "AIGNE Studio" }),
              description: o("products.aigneStudio.description"),
              icon: /* @__PURE__ */ e(d, { color: "#676cbf", backgroundColor: "#edeeff" })
            },
            {
              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/framework", ...n, children: "AIGNE Framework" }),
              description: o("products.aigneFramework.description"),
              icon: /* @__PURE__ */ e(d, { color: "#5086d0", backgroundColor: "#eef4ff" })
            }
          ]
        },
        {
          type: "Group",
          label: o("groups.modelsAdapters"),
          children: [
            {
              label: /* @__PURE__ */ e(t, { to: "https://www.aigne.io/hub", ...n, children: "AIGNE Hub" }),
              description: o("products.aigneHub.description"),
              icon: /* @__PURE__ */ e(d, { color: "#e4930b", backgroundColor: "#fbf4d4" })
            }
          ]
        }
      ];
    }
    return [];
  }, [o, r, k]);
  return /* @__PURE__ */ e(oe, { ref: a, className: `nav-menu-products is-${u} ${i}`, ...l, children: $.map((n) => /* @__PURE__ */ e(T, { label: n.label, children: /* @__PURE__ */ e(te, { maxContent: x, children: n.children.map((s) => /* @__PURE__ */ e(F, { variant: "panel", style: { padding: "8px" }, ...s })) }) }, n.label)) });
}
export {
  De as default
};
