import { Fragment, jsx, jsxs } from "react/jsx-runtime";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { Box, Skeleton, Stack, Tooltip, Typography } from "@mui/material";
import PaymentAmount from "../amount.js";
import QuoteDetailsPanel from "../../components/quote-details-panel.js";
export default function TotalSection({
  totalAmountText,
  totalUsdDisplay,
  currency,
  hasDynamicPricing,
  rateDisplay,
  rateInfo,
  quoteDetailRows,
  currentSlippagePercent,
  slippageConfig = void 0,
  isPriceLocked,
  isSubscription,
  completed = false,
  onSlippageChange = void 0,
  isStripePayment = false,
  thenInfo = "",
  isRateLoading = false
}) {
  const { t } = useLocaleContext();
  return /* @__PURE__ */ jsxs(Fragment, { children: [
    /* @__PURE__ */ jsxs(
      Stack,
      {
        sx: {
          display: "flex",
          justifyContent: "space-between",
          flexDirection: "row",
          alignItems: "flex-start",
          width: "100%"
        },
        children: [
          /* @__PURE__ */ jsx(Box, { className: "base-label", children: t("common.total") }),
          /* @__PURE__ */ jsxs(Stack, { sx: { alignItems: "flex-end" }, children: [
            isRateLoading ? /* @__PURE__ */ jsx(Skeleton, { variant: "text", width: 100, height: 24 }) : /* @__PURE__ */ jsx(PaymentAmount, { amount: totalAmountText, sx: { fontSize: "16px" } }),
            hasDynamicPricing && !isStripePayment && !isRateLoading && (totalUsdDisplay ? /* @__PURE__ */ jsxs(Typography, { sx: { fontSize: "0.7875rem", color: "text.lighter" }, children: [
              "\u2248 $",
              totalUsdDisplay
            ] }) : /* @__PURE__ */ jsx(Tooltip, { title: t("payment.checkout.quote.referenceUnavailable"), placement: "top", children: /* @__PURE__ */ jsx(Box, { component: "span", children: /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "0.7875rem", color: "text.lighter" }, children: "\u2248 \u2014" }) }) })),
            hasDynamicPricing && !isStripePayment && /* @__PURE__ */ jsx(
              QuoteDetailsPanel,
              {
                rateLine: rateDisplay ? t("payment.checkout.quote.rateLine", { symbol: currency.symbol, rate: rateDisplay }) : "",
                rows: quoteDetailRows,
                isSubscription,
                slippageValue: currentSlippagePercent,
                slippageConfig,
                onSlippageChange: !completed && onSlippageChange ? onSlippageChange : void 0,
                exchangeRate: rateInfo.exchangeRate,
                baseCurrency: rateInfo.baseCurrency,
                disabled: isPriceLocked
              }
            )
          ] })
        ]
      }
    ),
    thenInfo && /* @__PURE__ */ jsxs(
      Stack,
      {
        sx: {
          display: "flex",
          justifyContent: "space-between",
          flexDirection: "row",
          alignItems: "flex-start",
          width: "100%",
          borderTop: "1px solid",
          borderColor: "divider",
          pt: 1,
          mt: 1
        },
        children: [
          /* @__PURE__ */ jsx(Box, { className: "base-label", children: t("common.nextCharge") }),
          /* @__PURE__ */ jsx(Typography, { sx: { fontSize: "16px", color: "text.secondary" }, children: thenInfo })
        ]
      }
    )
  ] });
}
