"use strict";

Object.defineProperty(exports, "__esModule", {
  value: true
});
module.exports = ErrorView;
var _jsxRuntime = require("react/jsx-runtime");
var _material = require("@mui/material");
var _styles = require("@mui/material/styles");
var _ArrowBack = _interopRequireDefault(require("@mui/icons-material/ArrowBack"));
var _Header = _interopRequireDefault(require("@blocklet/ui-react/lib/Header"));
var _context = require("@arcblock/ux/lib/Locale/context");
var _format = require("../utils/format");
function _interopRequireDefault(e) { return e && e.__esModule ? e : { default: e }; }
function GeometricDecoration() {
  const theme = (0, _styles.useTheme)();
  const gridColor = (0, _styles.alpha)(theme.palette.primary.main, 0.06);
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      position: "relative",
      width: {
        xs: 200,
        md: 260
      },
      height: {
        xs: 200,
        md: 260
      },
      mb: {
        xs: 4,
        md: 6
      }
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        position: "absolute",
        inset: 0,
        borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
        background: t => `linear-gradient(45deg, ${(0, _styles.alpha)(t.palette.primary.main, 0.1)}, ${(0, _styles.alpha)(t.palette.primary.main, 0.03)})`,
        filter: "blur(1px)",
        animation: "spin 20s linear infinite",
        "@keyframes spin": {
          from: {
            transform: "rotate(0deg)"
          },
          to: {
            transform: "rotate(360deg)"
          }
        }
      }
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        position: "absolute",
        inset: 0,
        borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
        background: t => `linear-gradient(135deg, ${(0, _styles.alpha)(t.palette.primary.main, 0.07)}, ${(0, _styles.alpha)(t.palette.primary.main, 0.01)})`,
        filter: "blur(1px)",
        transform: "scale(0.88)",
        opacity: 0.6,
        animation: "spinReverse 15s linear infinite",
        "@keyframes spinReverse": {
          from: {
            transform: "scale(0.88) rotate(0deg)"
          },
          to: {
            transform: "scale(0.88) rotate(-360deg)"
          }
        }
      }
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        position: "absolute",
        inset: 0,
        borderRadius: "38% 62% 63% 37% / 41% 44% 56% 59%",
        overflow: "hidden",
        animation: "spin 20s linear infinite"
      },
      children: /* @__PURE__ */(0, _jsxRuntime.jsxs)("svg", {
        width: "100%",
        height: "100%",
        viewBox: "0 0 260 260",
        fill: "none",
        xmlns: "http://www.w3.org/2000/svg",
        style: {
          position: "absolute",
          inset: 0
        },
        children: [[52, 87, 122, 157, 192].map(y => /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
          x1: "30",
          y1: y,
          x2: "230",
          y2: y,
          stroke: gridColor,
          strokeWidth: "0.5"
        }, `h${y}`)), [52, 87, 122, 157, 192].map(x => /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
          x1: x,
          y1: "30",
          x2: x,
          y2: "230",
          stroke: gridColor,
          strokeWidth: "0.5"
        }, `v${x}`)), /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
          x1: "52",
          y1: "52",
          x2: "192",
          y2: "192",
          stroke: gridColor,
          strokeWidth: "0.5"
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)("line", {
          x1: "192",
          y1: "52",
          x2: "52",
          y2: "192",
          stroke: gridColor,
          strokeWidth: "0.5"
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)("circle", {
          cx: "130",
          cy: "130",
          r: "40",
          stroke: gridColor,
          strokeWidth: "0.5"
        }), /* @__PURE__ */(0, _jsxRuntime.jsx)("circle", {
          cx: "130",
          cy: "130",
          r: "75",
          stroke: gridColor,
          strokeWidth: "0.5"
        }), [[122, 87], [157, 87], [87, 122], [122, 122], [157, 122], [192, 122], [87, 157], [122, 157], [157, 157], [122, 192], [157, 192]].map(([cx, cy]) => /* @__PURE__ */(0, _jsxRuntime.jsx)("circle", {
          cx,
          cy,
          r: "1.5",
          fill: gridColor
        }, `d${cx}-${cy}`))]
      })
    })]
  });
}
function getErrorConfig(errorCode, error, t) {
  if (errorCode === "SESSION_EXPIRED") {
    return {
      title: t("payment.checkout.expired.title"),
      description: t("payment.checkout.expired.description"),
      color: "#f59e0b"
    };
  }
  if (errorCode === "EMPTY_LINE_ITEMS") {
    return {
      title: t("payment.checkout.emptyItems.title"),
      description: t("payment.checkout.emptyItems.description"),
      color: "#94a3b8"
    };
  }
  if (errorCode === "STOP_ACCEPTING_ORDERS") {
    return {
      title: t("payment.checkout.stopAcceptingOrders.title"),
      description: t("payment.checkout.stopAcceptingOrders.description"),
      color: "#f59e0b"
    };
  }
  return {
    title: t("payment.checkout.error.title"),
    description: error,
    color: "#ef4444"
  };
}
function ErrorContent({
  error,
  errorCode = void 0
}) {
  const {
    t
  } = (0, _context.useLocaleContext)();
  const theme = (0, _styles.useTheme)();
  const {
    title,
    description
  } = getErrorConfig(errorCode, error, t);
  const primaryColor = theme.palette.primary.main;
  const appUrl = typeof window !== "undefined" ? window.blocklet?.appUrl : "/";
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Stack, {
    alignItems: "center",
    justifyContent: "center",
    sx: {
      flex: 1,
      textAlign: "center",
      px: 3
    },
    children: [/* @__PURE__ */(0, _jsxRuntime.jsx)(GeometricDecoration, {}), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      component: "h1",
      sx: {
        fontWeight: 800,
        fontSize: {
          xs: 36,
          md: 52
        },
        lineHeight: 1.05,
        letterSpacing: "-0.03em",
        color: "text.primary",
        mb: 2
      },
      children: title
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Typography, {
      sx: {
        color: "text.secondary",
        fontSize: {
          xs: 15,
          md: 17
        },
        fontWeight: 300,
        lineHeight: 1.7,
        maxWidth: 420,
        letterSpacing: "0.01em"
      },
      children: description
    }), appUrl && /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Button, {
      href: appUrl,
      variant: "contained",
      disableElevation: true,
      startIcon: /* @__PURE__ */(0, _jsxRuntime.jsx)(_ArrowBack.default, {
        sx: {
          fontSize: "20px !important"
        }
      }),
      sx: {
        mt: 5,
        minWidth: 240,
        height: 56,
        px: 6,
        borderRadius: "9999px",
        textTransform: "none",
        fontWeight: 600,
        fontSize: 16,
        letterSpacing: "0.02em",
        color: th => (0, _format.primaryContrastColor)(th),
        boxShadow: `0 8px 32px -4px ${(0, _styles.alpha)(primaryColor, 0.3)}`,
        "&:hover": {
          boxShadow: `0 12px 40px -4px ${(0, _styles.alpha)(primaryColor, 0.4)}`,
          transform: "translateY(-1px)"
        },
        transition: "all 0.2s ease"
      },
      children: t("common.back")
    })]
  });
}
function ErrorView({
  error,
  errorCode = void 0,
  mode = "inline"
}) {
  const theme = (0, _styles.useTheme)();
  const primaryColor = theme.palette.primary.main;
  const isFullScreen = mode === "standalone";
  const meshBg = {
    bgcolor: t => t.palette.mode === "dark" ? "background.default" : "#f8faff",
    backgroundImage: t => t.palette.mode === "dark" ? "none" : `radial-gradient(at 0% 0%, ${(0, _styles.alpha)(primaryColor, 0.06)} 0px, transparent 50%),
           radial-gradient(at 100% 0%, ${(0, _styles.alpha)(primaryColor, 0.04)} 0px, transparent 50%),
           radial-gradient(at 100% 100%, ${(0, _styles.alpha)(primaryColor, 0.06)} 0px, transparent 50%),
           radial-gradient(at 0% 100%, rgba(203,213,225,0.3) 0px, transparent 50%)`
  };
  if (!isFullScreen) {
    return /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
      sx: {
        display: "flex",
        width: "100%",
        minHeight: {
          xs: 400,
          md: 520
        },
        maxWidth: 1120,
        mx: "auto",
        borderRadius: "16px",
        overflow: "hidden",
        boxShadow: 1,
        border: 1,
        borderColor: "divider",
        ...meshBg
      },
      children: /* @__PURE__ */(0, _jsxRuntime.jsx)(_material.Box, {
        sx: {
          flex: 1,
          p: {
            xs: 4,
            md: 6
          },
          display: "flex",
          flexDirection: "column",
          justifyContent: "center",
          alignItems: "center"
        },
        children: /* @__PURE__ */(0, _jsxRuntime.jsx)(ErrorContent, {
          error,
          errorCode
        })
      })
    });
  }
  return /* @__PURE__ */(0, _jsxRuntime.jsxs)(_material.Box, {
    sx: {
      width: "100%",
      height: "100vh",
      minHeight: "100vh",
      display: "flex",
      flexDirection: "column",
      position: "relative",
      overflow: "hidden",
      ...meshBg
    },
    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 => buildIns.filter(addon => ["locale-selector", "theme-mode-toggle", "session-user"].includes(addon.key))
    }), /* @__PURE__ */(0, _jsxRuntime.jsx)(ErrorContent, {
      error,
      errorCode
    })]
  });
}