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

// material-ui
import { CssBaseline, 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
          custom300: 300, // above 350
          custom350: 350, // above 350
          custom400: 400, // above 400
          custom450: 450, // above 450
          custom500: 500, // above 450
          custom550: 550, // above 450
          custom600: 600, // above 450
          custom650: 650, // above 450
          custom700: 700, // above 450
          custom750: 750, // above 450
          sm: 768, // Small: 768px and up
          custom800: 800, // above 450,
          custom850: 850, // above 450,
          custom900: 900, // above 450
          custom950: 950, // above 450
          custom1000: 1000, // above 450
          md: 1024, // Medium: 1024px and up
          custom1050: 1050, //
          custom1100: 1100, //
          lg: 1266, // Large: 1266px and up
          custom1300: 1300, // Large: 1266px and up
          custom1350: 1350, // 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}>
        <CssBaseline />
        {children}
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

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