import PropTypes from "prop-types";
import { useMemo } from "react";

// material-ui
import { CssBaseline, GlobalStyles, StyledEngineProvider } from "@mui/material";
import { createTheme, ThemeProvider } from "@mui/material/styles";

// project import
import useConfig from "hooks/useConfig";
import Palette from "./palette";
import Typography from "./typography";
import CustomShadows from "./shadows";
import componentsOverride from "./overrides";

// ==============================|| DEFAULT THEME - MAIN  ||============================== //

export default function ThemeCustomization({ children }) {
  const { themeDirection, mode, presetColor, fontFamily } = useConfig();

  const theme = useMemo(() => Palette(mode, presetColor), [mode, presetColor]);

  // eslint-disable-next-line react-hooks/exhaustive-deps
  const themeTypography = useMemo(() => Typography(fontFamily), [fontFamily]);
  const themeCustomShadows = useMemo(() => CustomShadows(theme), [theme]);

  const themeOptions = useMemo(
    () => ({
      breakpoints: {
        values: {
          xs: 0, // Extra-small: 0px and up
          custom350: 350, // above 350
          custom400: 400, // above 400
          custom450: 450, // above 450
          sm: 768, // Small: 768px and up
          md: 1024, // Medium: 1024px and up
          lg: 1266, // Large: 1266px and up
          xl: 1440, // Extra-large: 1440px and up
        },
      },
      direction: themeDirection,
      mixins: {
        toolbar: {
          minHeight: 60,
          paddingTop: 8,
          paddingBottom: 8,
        },
      },
      palette: theme.palette,
      customShadows: themeCustomShadows,
      typography: themeTypography,
    }),
    [themeDirection, theme, themeTypography, themeCustomShadows]
  );

  const themes = createTheme(themeOptions);
  themes.components = componentsOverride(themes);

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={themes} sx={{}}>
        <CssBaseline />
        <GlobalStyles
          styles={{
            "*": {
              scrollbarWidth: "thin",
              scrollbarColor: "#65387A #f1f1f1",
            },
            "*::-webkit-scrollbar": {
              width: "5px",
              height: "5px",
            },
            "*::-webkit-scrollbar-thumb": {
              backgroundColor: "#65387A",
              borderRadius: "5px",
            },
            "*::-webkit-scrollbar-track": {
              backgroundColor: "#f1f1f1",
            },
          }}
        />
        {children}
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

ThemeCustomization.propTypes = {
  children: PropTypes.node,
};
