import { useSystemTheme } from '@/hooks';
import { getColors } from './getColors';
import { getShadow } from './getShadow';
import { ComponentsOverrides } from './overrides';
import { Palette } from './palette';
import { CustomShadows } from './shadows';
import { Typography } from './typography';
import { useThemeConfig } from '@/components/Layout/ThemeProvider';
import { ThemeProps } from '@/themes/types';
import { CssBaseline, StyledEngineProvider } from '@mui/material';
import { ThemeProvider, createTheme } from '@mui/material/styles';
import _ from 'lodash';
import { PropsWithChildren, useMemo } from 'react';

type ThemeCustomizationProps = PropsWithChildren<{ themeOverrides: unknown }>;

function ThemeCustomizationProvider({ themeOverrides, children }: ThemeCustomizationProps) {
  const _themeConfig = useThemeConfig();
  const { themeDirection, mode, presetColor, fontFamily } = _themeConfig;
  const systemMode = useSystemTheme();
  const paletteMode = useMemo(() => (mode === 'auto' ? systemMode : mode), [mode, systemMode]);

  const theme = useMemo(() => {
    return Palette(paletteMode, presetColor);
  }, [paletteMode, presetColor]);

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

  const themeOptions = useMemo(
    () =>
      _.merge(
        {
          breakpoints: {
            values: {
              xs: 0,
              sm: 768,
              md: 1024,
              lg: 1266,
              xl: 1440
            }
          },
          direction: themeDirection,
          mixins: {
            toolbar: {
              minHeight: 60,
              paddingTop: 8,
              paddingBottom: 8
            }
          },
          palette: theme.palette,
          customShadows: themeCustomShadows,
          typography: themeTypography,
          // shadows: theme.shadows.map(() => 'none'),
          components: {
            MuiIconButton: {
              styleOverrides: {
                sizeExtraSmall: {
                  width: theme.spacing(2.6875),
                  height: theme.spacing(2.6875),
                  fontSize: '0.625rem'
                }
              }
            }
          }
        },
        typeof themeOverrides === 'function' ? themeOverrides(theme) : themeOverrides
      ),
    [themeDirection, theme, themeTypography, themeCustomShadows, themeOverrides]
  );

  const themes = createTheme(themeOptions);
  const currentComponents = _.cloneDeep(themes.components ?? {});

  themes.components = _.merge(ComponentsOverrides(themes), currentComponents);

  return (
    <StyledEngineProvider injectFirst>
      <ThemeProvider theme={themes}>
        <CssBaseline enableColorScheme />
        {children}
      </ThemeProvider>
    </StyledEngineProvider>
  );
}

export { ThemeCustomizationProvider, getColors as getThemeColor, getShadow as getThemeShadow };