import { jsx, jsxs } from "react/jsx-runtime";
import TrendingDownIcon from "@mui/icons-material/TrendingDown";
import { Box, CircularProgress, Stack, Typography } from "@mui/material";
import { useLocaleContext } from "@arcblock/ux/lib/Locale/context";
import { INTERVAL_LOCALE_KEY } from "../../utils/format.js";
export default function BillingToggle({ billingInterval }) {
  const { t } = useLocaleContext();
  if (!billingInterval?.available?.length || billingInterval.available.length <= 1) {
    return null;
  }
  const best = billingInterval.available.reduce(
    (a, b) => Number(b.savings || 0) > Number(a.savings || 0) ? b : a
  );
  return /* @__PURE__ */ jsxs(Stack, { direction: "row", alignItems: "center", spacing: 2, sx: { mb: 3 }, children: [
    /* @__PURE__ */ jsx(
      Stack,
      {
        direction: "row",
        alignItems: "center",
        sx: {
          bgcolor: "background.paper",
          borderRadius: "9999px",
          border: "1px solid",
          borderColor: "divider",
          p: "4px",
          display: "inline-flex",
          boxShadow: (theme) => theme.palette.mode === "dark" ? "0 1px 2px 0 rgba(0,0,0,0.3)" : "0 1px 2px 0 rgba(0,0,0,0.05)"
        },
        children: billingInterval.available.map((option) => {
          const isSelected = option.interval === billingInterval.current;
          const selectedSx = {
            bgcolor: (th) => th.palette.mode === "dark" ? "rgba(156,106,222,0.25)" : "rgba(156,106,222,0.15)",
            color: "primary.main",
            backdropFilter: "blur(8px)",
            WebkitBackdropFilter: "blur(8px)",
            boxShadow: (th) => th.palette.mode === "dark" ? "0 2px 8px rgba(156,106,222,0.2), inset 0 1px 0 rgba(255,255,255,0.06)" : "0 2px 8px rgba(156,106,222,0.15), inset 0 1px 0 rgba(255,255,255,0.5)",
            border: "1px solid",
            borderColor: (th) => th.palette.mode === "dark" ? "rgba(156,106,222,0.3)" : "rgba(156,106,222,0.2)"
          };
          const unselectedSx = {
            color: "text.secondary",
            border: "1px solid transparent",
            "&:hover": { color: "text.primary" }
          };
          return /* @__PURE__ */ jsx(
            Box,
            {
              onClick: () => {
                if (option.interval !== billingInterval.current && !billingInterval.switching) {
                  billingInterval.switch(option.interval);
                }
              },
              sx: {
                px: 3.5,
                py: 1,
                borderRadius: "9999px",
                cursor: "pointer",
                transition: "all 0.3s ease",
                userSelect: "none",
                ...isSelected ? selectedSx : unselectedSx
              },
              children: billingInterval.switching && isSelected ? /* @__PURE__ */ jsx(CircularProgress, { size: 14, color: "inherit", sx: { my: "1px" } }) : /* @__PURE__ */ jsx(
                Typography,
                {
                  component: "span",
                  sx: {
                    fontSize: 14,
                    fontWeight: 700,
                    color: "inherit",
                    lineHeight: 1
                  },
                  children: t(INTERVAL_LOCALE_KEY[option.interval] || option.interval)
                }
              )
            },
            option.interval
          );
        })
      }
    ),
    best.savings && Number(best.savings) > 0 && /* @__PURE__ */ jsxs(
      Stack,
      {
        direction: "row",
        alignItems: "center",
        spacing: 0.75,
        sx: {
          px: 1.5,
          py: 0.75,
          bgcolor: (theme) => theme.palette.mode === "dark" ? "rgba(18,184,134,0.1)" : "#ebfef5",
          color: "#12b886",
          fontSize: 11,
          fontWeight: 700,
          borderRadius: "9999px",
          border: "1px solid",
          borderColor: (theme) => theme.palette.mode === "dark" ? "rgba(18,184,134,0.2)" : "#d3f9e8",
          textTransform: "uppercase",
          letterSpacing: "0.05em"
        },
        children: [
          /* @__PURE__ */ jsx(TrendingDownIcon, { sx: { fontSize: 14 } }),
          /* @__PURE__ */ jsxs(
            Typography,
            {
              component: "span",
              sx: { fontSize: "inherit", fontWeight: "inherit", color: "inherit", lineHeight: 1 },
              children: [
                "SAVE ",
                best.savings,
                "%"
              ]
            }
          )
        ]
      }
    )
  ] });
}
