import type { FC } from 'react';
import { StyledEngineProvider, ThemeProvider as MuiThemeProvider } from '@mui/material/styles';
import { ThemeProvider as Emotion10ThemeProvider } from '@emotion/react';
import { createTheme } from './theme';
import type { Theme } from './types';

declare module '@mui/styles/defaultTheme' {
  // eslint-disable-next-line @typescript-eslint/no-empty-interface
  interface DefaultTheme extends Theme {}
}

export interface ThemeProviderProps {
  palette?: Partial<Theme['palette']>;
  typography?: Partial<Theme['typography']>;
}

const ThemeProvider: FC<ThemeProviderProps> = props => {
  const { children, palette, typography } = props;
  const theme = createTheme({ palette, typography });

  return (
    <StyledEngineProvider injectFirst>
      <Emotion10ThemeProvider theme={theme}>
        <MuiThemeProvider theme={theme}>{children}</MuiThemeProvider>
      </Emotion10ThemeProvider>
    </StyledEngineProvider>
  );
};

export { ThemeProvider };
/**
 * Must be exported to provide option to use this package's
 * material-ui module augmentation
 */
export type { Theme };

ThemeProvider.defaultProps = {
  palette: {},
  typography: {}
};