import { jsx, jsxs } from "react/jsx-runtime";
import { createTheme, Box, CssBaseline } from "@mui/material";
import { create as createBlockletTheme, deepmerge } from "@arcblock/ux/lib/Theme";
import { deepmergeAll } from "@arcblock/ux/lib/Util";
import { ThemeProvider, useTheme } from "@mui/material/styles";
import { useMemo } from "react";
import "./index.css";
import "./types";
import { typography } from "./typography.js";
export function PaymentThemeProvider({
  children,
  theme: customTheme = {}
}) {
  const { sx: themeSX = {}, ...restTheme } = customTheme || {};
  const parentTheme = useTheme();
  const mergeTheme = useMemo(() => {
    const blockletTheme = parentTheme.themeName === "ArcBlock" ? parentTheme : createBlockletTheme();
    const { mode } = blockletTheme.palette;
    let paymentThemeOptions = deepmerge(blockletTheme, {
      palette: {
        chip: {
          success: {
            text: mode === "dark" ? "#10b981" : "#047857",
            background: mode === "dark" ? "#022c22" : "#d1fae5",
            border: mode === "dark" ? "#064e3b" : "#a7f3d0"
          },
          default: {
            text: mode === "dark" ? "#adb1b8" : "#4b5563",
            background: mode === "dark" ? "#2e3035" : "#f3f4f6",
            border: mode === "dark" ? "#3c3f44" : "#e5e7eb"
          },
          secondary: {
            text: mode === "dark" ? "#8b5cf6" : "#6d28d9",
            background: mode === "dark" ? "#2e1064" : "#ede9fe",
            border: mode === "dark" ? "#3c3f44" : "#ddd6fe"
          },
          error: {
            text: mode === "dark" ? "#ff6369" : "#be123c",
            background: mode === "dark" ? "#4c0519" : "#ffe4e6",
            border: mode === "dark" ? "#881337" : "#fecdd3"
          },
          warning: {
            text: mode === "dark" ? "#f59e0b" : "#b45309",
            background: mode === "dark" ? "#451a03" : "#fef4c7",
            border: mode === "dark" ? "#78350f" : "#fde68a"
          },
          info: {
            text: mode === "dark" ? "#3b82f6" : "#1d4ed8",
            background: mode === "dark" ? "#172554" : "#dbeafe",
            border: mode === "dark" ? "#1e3a8a" : "#bfdbfe"
          }
        }
      }
    });
    const {
      palette,
      shape: { borderRadius },
      shadows
    } = paymentThemeOptions;
    paymentThemeOptions = deepmergeAll([
      paymentThemeOptions,
      {
        palette: {
          text: {
            lighter: palette.grey[400],
            link: palette.secondary.main
          }
        }
      },
      {
        components: {
          MuiOutlinedInput: {
            styleOverrides: {
              root: {
                borderRadius,
                backgroundColor: palette.grey[50],
                "&.Mui-disabled": {
                  backgroundColor: palette.grey[100]
                },
                ".MuiInputBase-input": {
                  fontSize: "14px",
                  minHeight: "1.65em",
                  lineHeight: "1.65em"
                },
                "&.Mui-focused .MuiOutlinedInput-notchedOutline": {
                  borderWidth: "1px"
                }
              }
            }
          },
          MuiButton: {
            defaultProps: {
              size: "small"
            },
            styleOverrides: {
              root: {
                fontSize: "0.875rem",
                fontWeight: 500,
                textTransform: "none",
                boxShadow: "none"
              },
              sizeSmall: {
                height: 32
              },
              outlinedPrimary: {
                borderColor: palette.divider,
                "&:hover": {
                  borderColor: palette.divider
                }
              }
            }
          },
          MuiIconButton: {
            defaultProps: {
              size: "small"
            },
            styleOverrides: {
              root: {
                textTransform: "none"
              },
              colorPrimary: {
                backgroundColor: palette.background.default
              }
            }
          },
          MuiToggleButton: {
            styleOverrides: {
              root: {
                textTransform: "none"
              }
            }
          },
          MuiTab: {
            styleOverrides: {
              root: {
                textTransform: "none",
                fontSize: "0.875rem"
              }
            }
          },
          MuiTooltip: {
            defaultProps: {
              enterTouchDelay: 3e3,
              leaveTouchDelay: 100
            },
            styleOverrides: {
              tooltip: {
                fontSize: "0.875rem"
              }
            }
          },
          MuiPopover: {
            styleOverrides: {
              root: {
                zIndex: 1200
              },
              paper: {
                border: `1px solid ${palette.divider}`,
                boxShadow: shadows[2]
              }
            }
          },
          MuiCssBaseline: {
            styleOverrides: {
              ".base-card": {
                padding: "20px",
                borderRadius: 1.5 * borderRadius,
                // 12px
                background: palette.background.default,
                border: `1px solid ${palette.divider}`,
                boxShadow: shadows[1]
              },
              ".base-label": {
                color: palette.grey.A700,
                fontSize: "16px",
                fontWeight: "500",
                lineHeight: "24px"
              },
              ".base-dialog": {
                ".MuiPaper-root>.MuiDialogContent-root": {
                  paddingTop: "0"
                }
              },
              a: {
                textDecoration: "none !important"
              }
            }
          },
          MuiRadio: {
            styleOverrides: {
              root: {
                "&:hover": {
                  background: "none"
                },
                "&.Mui-checked": {
                  color: palette.primary.main
                }
              }
            }
          },
          MuiCheckbox: {
            styleOverrides: {
              root: {
                color: palette.primary.main,
                "&.Mui-checked": {
                  color: palette.primary.main
                }
              }
            }
          },
          MuiInputBase: {
            defaultProps: {
              size: "small"
            },
            styleOverrides: {
              root: {
                fontSize: "0.875rem",
                backgroundColor: palette.grey[50]
              }
            }
          },
          MuiInputLabel: {
            defaultProps: {
              size: "small"
            },
            styleOverrides: {
              root: {
                fontSize: "0.875rem"
              }
            }
          },
          MuiChip: {
            styleOverrides: {
              root: {
                borderRadius: `${borderRadius * 2}px`,
                border: "1px solid transparent",
                "&.MuiChip-filledSuccess": {
                  color: palette.chip.success.text,
                  backgroundColor: palette.chip.success.background,
                  borderColor: palette.chip.success.border
                },
                "&.MuiChip-filledDefault": {
                  color: palette.chip.default.text,
                  backgroundColor: palette.chip.default.background,
                  borderColor: palette.chip.default.border
                },
                "&.MuiChip-filled.MuiChip-colorSecondary": {
                  color: palette.chip.secondary.text,
                  backgroundColor: palette.chip.secondary.background,
                  borderColor: palette.chip.secondary.border
                },
                "&.MuiChip-filledError": {
                  color: palette.chip.error.text,
                  backgroundColor: palette.chip.error.background,
                  borderColor: palette.chip.error.border
                },
                "&.MuiChip-filledWarning": {
                  color: palette.chip.warning.text,
                  backgroundColor: palette.chip.warning.background,
                  borderColor: palette.chip.warning.border
                },
                "&.MuiChip-filled.MuiChip-colorPrimary,&.MuiChip-filledInfo": {
                  color: palette.chip.info.text,
                  backgroundColor: palette.chip.info.background,
                  borderColor: palette.chip.info.border
                }
              }
            }
          },
          MuiDialog: {
            styleOverrides: {
              root: {
                zIndex: 1200
              }
            }
          }
        }
      },
      restTheme
    ]);
    return createTheme(paymentThemeOptions);
  }, [parentTheme, restTheme]);
  return /* @__PURE__ */ jsxs(ThemeProvider, { theme: mergeTheme, children: [
    /* @__PURE__ */ jsx(CssBaseline, {}),
    /* @__PURE__ */ jsx(Box, { sx: { height: "100%", ...themeSX }, children })
  ] });
}
export { typography };
