import { createTheme, useTheme } from '@mui/material';
import { DID_CONNECT_THEME_LIGHT, DID_CONNECT_THEME_DARK } from '@blocklet/theme';
import { ThemeProvider } from '../Theme';

// DID Connect 使用自己的 Theme 配置，不受 Blocklet theme 影响
const themeLight = createTheme(DID_CONNECT_THEME_LIGHT);
const themeDark = createTheme(DID_CONNECT_THEME_DARK);

export default function withUxTheme(Component: React.ComponentType<any>) {
  function WithUxThemeComponent(props: any) {
    const { palette } = useTheme();
    const theme = palette.mode === 'dark' ? themeDark : themeLight;

    return (
      <ThemeProvider theme={theme}>
        <Component {...props} />
      </ThemeProvider>
    );
  }

  return WithUxThemeComponent;
}
