import { jsx, jsxs } from "react/jsx-runtime";
import { useTheme } from "@arcblock/ux/lib/Theme";
import { Avatar, Stack, Typography } from "@mui/material";
import { useCreation, useLocalStorageState, useSize } from "ahooks";
import Livemode from "../components/livemode.js";
import { getStatementDescriptor } from "../libs/util.js";
import UserButtons from "./form/addon.js";
export default function PaymentHeader({ checkoutSession }) {
  const [livemode] = useLocalStorageState("livemode", { defaultValue: true });
  const brand = getStatementDescriptor(checkoutSession.line_items);
  const theme = useTheme();
  const domSize = useSize(document.body);
  const isColumnLayout = useCreation(() => {
    if (domSize) {
      if (domSize?.width <= theme.breakpoints.values.md) {
        return true;
      }
    }
    return false;
  }, [domSize, theme]);
  return /* @__PURE__ */ jsxs(
    Stack,
    {
      className: "cko-header",
      direction: "row",
      spacing: 1,
      sx: {
        alignItems: "center",
        justifyContent: "space-between"
      },
      children: [
        /* @__PURE__ */ jsxs(
          Stack,
          {
            direction: "row",
            spacing: 1,
            sx: {
              alignItems: "center"
            },
            children: [
              /* @__PURE__ */ jsx(
                Avatar,
                {
                  variant: "square",
                  src: window.blocklet.appLogo,
                  sx: { width: 32, height: 32 },
                  alt: window.blocklet?.appName || "Logo"
                }
              ),
              /* @__PURE__ */ jsx(Typography, { sx: { color: "text.primary", fontWeight: 600 }, children: brand }),
              !livemode && /* @__PURE__ */ jsx(Livemode, {})
            ]
          }
        ),
        isColumnLayout ? /* @__PURE__ */ jsx(UserButtons, {}) : null
      ]
    }
  );
}
