"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = CheckoutLayout;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _styles = require("@mui/material/styles");
var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
var _mobile = require("../../hooks/mobile");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
const hiddenScrollbar = {
  overflowY: "auto",
  "&::-webkit-scrollbar": {
    display: "none"
  },
  scrollbarWidth: "none"
};
const mobileFadeIn = {
  "@keyframes mobileFadeIn": {
    from: {
      opacity: 0
    },
    to: {
      opacity: 1
    }
  },
  animation: {
    xs: "mobileFadeIn 0.4s ease both",
    md: "none"
  }
};
const fadeIn = {
  "@keyframes fadeIn": {
    from: {
      opacity: 0,
      transform: "translateY(12px)"
    },
    to: {
      opacity: 1,
      transform: "translateY(0)"
    }
  },
  animation: {
    xs: "none",
    md: "fadeIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both"
  }
};
const isSafari = typeof navigator !== "undefined" && /Safari/.test(navigator.userAgent) && !/Chrome/.test(navigator.userAgent);
const slideInFromRight = isSafari ? {
  "@keyframes panelFadeIn": {
    from: {
      opacity: 0,
      transform: "translateX(24px)"
    },
    to: {
      opacity: 1,
      transform: "none"
    }
  },
  animation: {
    xs: "none",
    md: "panelFadeIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) both"
  }
} : {
  "@keyframes slideInRight": {
    from: {
      transform: "translateX(100%)"
    },
    to: {
      transform: "translateX(0)"
    }
  },
  animation: {
    xs: "none",
    md: "slideInRight 0.5s cubic-bezier(0.16, 1, 0.3, 1) forwards"
  }
};
function CheckoutLayout({
  left,
  right,
  mode = "inline"
}) {
  const isFullScreen = mode === "standalone";
  const {
    isMobile
  } = (0, _mobile.useMobile)();
  const theme = (0, _styles.useTheme)();
  const isDark = theme.palette.mode === "dark";
  const hideLeft = left === null;
  const mobileSubmitBarSx = {};
  if (isMobile && !hideLeft) {
    mobileSubmitBarSx["& .cko-v2-submit-btn"] = {
      position: "fixed",
      bottom: 0,
      left: 0,
      right: 0,
      zIndex: 999,
      bgcolor: isDark ? "rgba(30,30,30,0.82)" : "background.paper",
      backdropFilter: isDark ? "blur(12px)" : "none",
      p: 1.5,
      borderTop: "1px solid",
      borderColor: "divider",
      boxShadow: isDark ? "0 -4px 20px rgba(0,0,0,0.4)" : "0 -2px 10px rgba(0,0,0,0.08)"
    };
  }
  if (!isFullScreen) {
    return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
      sx: {
        display: "flex",
        flexDirection: {
          xs: "column",
          md: "row"
        },
        width: "100%",
        minHeight: {
          md: 640
        },
        maxWidth: 1120,
        mx: "auto",
        borderRadius: "16px",
        overflow: "hidden",
        boxShadow: 1,
        border: 1,
        borderColor: "divider",
        borderLeft: "4px solid",
        borderLeftColor: "primary.main",
        // Same bg as left panel so slide-in reveals white over gradient
        bgcolor: t => t.palette.mode === "dark" ? "background.default" : "#f8faff",
        ...mobileFadeIn
      },
      children: [!hideLeft && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          flex: 1,
          minWidth: 0,
          bgcolor: t => t.palette.mode === "dark" ? "background.default" : "#f8faff",
          p: {
            xs: 3,
            md: 5
          },
          pt: {
            xs: 3,
            md: 4
          },
          display: "flex",
          flexDirection: "column",
          ...fadeIn
        },
        children: left
      }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          width: hideLeft ? "100%" : {
            xs: "100%",
            md: 480
          },
          flexShrink: 0,
          bgcolor: "background.paper",
          p: {
            xs: 3,
            md: 4
          },
          pt: {
            xs: 3,
            md: 4
          },
          display: "flex",
          flexDirection: "column",
          overflow: {
            md: "hidden"
          },
          ...(hideLeft ? {} : slideInFromRight)
        },
        children: right
      })]
    });
  }
  const mobileBg = isDark ? theme.palette.background.default : theme.palette.grey[100];
  const desktopBg = isDark ? theme.palette.background.default : "#f8faff";
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      width: "100%",
      height: {
        xs: "auto",
        md: "100vh"
      },
      minHeight: {
        xs: "100vh"
      },
      overflow: {
        md: "hidden"
      },
      display: "flex",
      flexDirection: {
        xs: "column",
        md: "row"
      },
      position: "relative",
      // Mobile: solid gray bg; Desktop: gradient over light blue
      background: isMobile ? mobileBg : `linear-gradient(160deg, ${(0, _styles.alpha)(theme.palette.primary.main, 0.03)} 0%, ${(0, _styles.alpha)(theme.palette.primary.main, 0.07)} 50%, ${(0, _styles.alpha)(theme.palette.primary.main, 0.04)} 100%)`,
      bgcolor: desktopBg,
      ...mobileFadeIn
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_Header.default, {
      sx: {
        position: "absolute",
        top: 20,
        left: 0,
        right: 0,
        zIndex: 10,
        background: "transparent",
        "& .header-container": {
          height: "auto"
        }
      },
      hideNavMenu: true,
      brand: null,
      description: null,
      addons: buildIns => {
        const addons = buildIns.filter(addon => ["locale-selector", "theme-mode-toggle", "session-user"].includes(addon.key));
        return addons;
      }
    }), !hideLeft && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        flex: {
          xs: "none",
          md: "0 0 50%"
        },
        width: {
          xs: "100%"
        },
        height: {
          xs: "auto",
          md: "100vh"
        },
        display: "flex",
        justifyContent: {
          md: "center"
        },
        ...(isMobile ? {
          bgcolor: "background.paper",
          mt: 9
        } : {}),
        ...hiddenScrollbar
      },
      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          width: "100%",
          maxWidth: {
            md: 640
          },
          p: {
            xs: 3,
            md: 5
          },
          pt: {
            xs: 3,
            md: 10
          },
          display: "flex",
          flexDirection: "column",
          flex: 1,
          ...fadeIn
        },
        children: left
      })
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        flex: hideLeft ? "none" : {
          xs: "none",
          md: "0 0 50%"
        },
        width: hideLeft ? "100%" : {
          xs: "100%"
        },
        height: hideLeft ? "100vh" : {
          xs: "auto",
          md: "100vh"
        },
        bgcolor: "background.paper",
        boxShadow: hideLeft ? "none" : {
          md: "-4px 0 16px rgba(0,0,0,0.04)"
        },
        position: "relative",
        display: "flex",
        flexDirection: "column",
        ...(hideLeft ? {} : slideInFromRight),
        ...(isMobile && !hideLeft ? {
          pb: "180px",
          mt: 2
        } : {}),
        // Mobile: scroll entire panel; Desktop: let PaymentPanel handle internal scroll
        overflowY: {
          xs: "auto",
          md: "hidden"
        },
        "&::-webkit-scrollbar": {
          display: "none"
        },
        scrollbarWidth: "none",
        ...mobileSubmitBarSx
      },
      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          width: "100%",
          maxWidth: {
            md: 600
          },
          mx: "auto",
          p: {
            xs: 3,
            md: 4
          },
          pt: hideLeft ? {
            xs: 10,
            md: "10vh"
          } : {
            xs: 3,
            md: "10vh"
          },
          display: "flex",
          flexDirection: "column",
          flex: 1,
          minHeight: 0,
          justifyContent: hideLeft ? "center" : void 0
        },
        children: right
      })
    })]
  });
}