import { jsx, jsxs } from "react/jsx-runtime";
import { Avatar, Box, Stack, Typography } from "@mui/material";
import { BN } from "@ocap/util";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import DID from "@arcblock/ux/lib/DID";
import { formatBNStr, formatLinkWithLocale } from "../libs/util.js";
export default function PaymentBeneficiaries({ data, currency, totalAmount = "0" }) {
  const { t, locale } = useLocaleContext();
  return /* @__PURE__ */ jsxs(Stack, { spacing: 2, children: [
    /* @__PURE__ */ jsx(
      Typography,
      {
        variant: "subtitle2",
        sx: {
          color: "text.secondary"
        },
        children: t("benefits.title", { count: data.length })
      }
    ),
    data.map((item) => {
      const amount = item.amount || (totalAmount ? new BN(totalAmount).mul(new BN(Number(item.percent))).div(new BN(100)).toString() : "0");
      return /* @__PURE__ */ jsxs(
        Stack,
        {
          direction: "row",
          sx: {
            alignItems: "center",
            justifyContent: "space-between",
            px: 0.5,
            borderRadius: 1,
            bgcolor: "background.paper",
            "&:hover": {
              bgcolor: "action.hover"
            }
          },
          children: [
            /* @__PURE__ */ jsxs(
              Stack,
              {
                direction: "row",
                spacing: 1.5,
                sx: {
                  alignItems: "center",
                  width: { xs: "100%", sm: "auto" }
                },
                children: [
                  /* @__PURE__ */ jsx(
                    Avatar,
                    {
                      src: item.avatar,
                      alt: item.name,
                      sx: { width: 32, height: 32 },
                      variant: item.type === "dapp" ? "square" : "circular"
                    }
                  ),
                  /* @__PURE__ */ jsxs(Box, { children: [
                    /* @__PURE__ */ jsx(
                      Typography,
                      {
                        variant: "subtitle2",
                        onClick: () => {
                          if (item.url) {
                            window.open(formatLinkWithLocale(item.url, locale), "_blank");
                          }
                        },
                        sx: {
                          cursor: item.url ? "pointer" : "default",
                          "&:hover": {
                            color: item.url ? "text.link" : "inherit"
                          }
                        },
                        children: item.name
                      }
                    ),
                    /* @__PURE__ */ jsx(
                      DID,
                      {
                        did: item.address,
                        compact: true,
                        responsive: false,
                        sx: { whiteSpace: "nowrap", fontSize: "0.875rem !important" },
                        copyable: false
                      }
                    )
                  ] })
                ]
              }
            ),
            /* @__PURE__ */ jsxs(
              Stack,
              {
                sx: {
                  alignItems: "flex-end",
                  width: { xs: "100%", sm: "auto" },
                  mt: { xs: 1, sm: 0 }
                },
                children: [
                  /* @__PURE__ */ jsxs(Typography, { variant: "subtitle2", children: [
                    formatBNStr(amount, currency.decimal, currency?.maximum_precision ?? 6),
                    " ",
                    currency.symbol
                  ] }),
                  /* @__PURE__ */ jsxs(
                    Typography,
                    {
                      variant: "caption",
                      sx: {
                        color: "text.secondary",
                        fontSize: "0.875rem"
                      },
                      children: [
                        Number(item.percent),
                        "%"
                      ]
                    }
                  )
                ]
              }
            )
          ]
        },
        item.address
      );
    })
  ] });
}
