import { ReactNode, useMemo } from 'react';

import { createTheme as createMuiTheme } from '@material-hu/mui';
import { ThemeProvider } from '@material-hu/mui/styles';
import { buildNewPalette } from '@material-hu/theme/hugo/newTokens';
import { createNewTheme } from '@material-hu/theme/material-hu';

import { THEMES } from 'src/constants';
import useSettings from 'src/contexts/SettingsContext';

const useNewTheme = () => {
  const { settings } = useSettings();

  // useMemo is needed to stop the theme from being recreated on every render
  // Use the same logic as createTheme in theme/index.ts to ensure consistency
  return useMemo(() => {
    // Create the base new theme
    const baseTheme = createNewTheme({
      colorPreset: settings.primary,
    });

    // Determine mode based on theme (same logic as createTheme)
    const mode = settings.theme === THEMES.LIGHT ? 'light' : 'dark';

    // Build new palette with the new tokens (same as createTheme)
    // Pass primaryColor to ensure brand colors match the main theme
    const newPalette = buildNewPalette(mode, settings.primary);

    // Extend the theme to include the new palette
    // This ensures compatibility with hooks that use the new tokens
    const newTheme = createMuiTheme(baseTheme, {
      palette: {
        ...baseTheme.palette,
        new: newPalette, // Add new tokens to ensure compatibility with both providers
      },
    });

    const NewThemeProvider = ({ children }: { children: ReactNode }) => (
      <ThemeProvider theme={newTheme}>{children}</ThemeProvider>
    );
    NewThemeProvider.displayName = 'NewThemeProvider';
    return NewThemeProvider;
  }, [settings.primary, settings.theme]); // Include theme in dependencies to update when theme changes
};

export default useNewTheme;