import { jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { LockOutlined } from "@mui/icons-material";
import { Box, Typography } from "@mui/material";
import { useMemo } from "react";
import { formatExchangeRate } from "../libs/util.js";
function getQuoteLockInfo(items, currency) {
  if (!items?.length || !currency) {
    return null;
  }
  const dynamicItems = items.filter((item) => {
    const price = item.upsell_price || item.price;
    return price?.pricing_type === "dynamic" && item?.quoted_amount;
  });
  if (!dynamicItems.length) {
    return null;
  }
  let expiresAt = null;
  let exchangeRate = null;
  dynamicItems.forEach((item) => {
    if (item?.expires_at) {
      expiresAt = expiresAt === null ? item?.expires_at : Math.min(expiresAt, item?.expires_at);
    }
    if (!exchangeRate) {
      exchangeRate = item?.exchange_rate || null;
    }
  });
  return {
    exchangeRate,
    tokenSymbol: currency.symbol,
    baseCurrency: (dynamicItems[0]?.upsell_price || dynamicItems[0]?.price)?.base_currency || "USD",
    expiresAt
  };
}
export default function QuoteLockBanner({ items, currency }) {
  const { t } = useLocaleContext();
  const quoteLockInfo = useMemo(() => getQuoteLockInfo(items, currency), [items, currency]);
  if (!quoteLockInfo || !quoteLockInfo.exchangeRate) {
    return null;
  }
  const formattedRateValue = formatExchangeRate(quoteLockInfo.exchangeRate);
  let formattedRate = "";
  if (formattedRateValue) {
    formattedRate = quoteLockInfo.baseCurrency === "USD" ? `$${formattedRateValue}` : `${formattedRateValue} ${quoteLockInfo.baseCurrency}`;
  }
  return /* @__PURE__ */ jsx(
    Box,
    {
      sx: {
        bgcolor: "action.hover",
        border: "1px solid",
        borderColor: "divider",
        borderRadius: 1,
        px: 2,
        py: 1.5,
        mb: 2
      },
      children: /* @__PURE__ */ jsxs(
        Box,
        {
          sx: {
            display: "flex",
            alignItems: "center",
            gap: 1.5,
            flexWrap: "wrap"
          },
          children: [
            /* @__PURE__ */ jsx(LockOutlined, { sx: { fontSize: "1rem", color: "success.main" } }),
            /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.875rem", color: "text.primary", flex: 1 }, children: t("payment.checkout.quote.dynamicPricingInfo", {
              symbol: quoteLockInfo.tokenSymbol,
              rate: formattedRate,
              currency: ""
            }) })
          ]
        }
      )
    }
  );
}
