import React from "react";
import {
  ThemeProvider as MuiThemeProvider,
  createTheme,
  StyledEngineProvider,
} from "@mui/material/styles";
import createGenerateClassName from "@mui/styles/createGenerateClassName";
import StylesProvider from "@mui/styles/StylesProvider";
import { CssBaseline } from "@mui/material";
import theme from "../theme";

type ThemeProviderProps = {
  children?: React.ReactNode;
};

const generateClassName = createGenerateClassName({
  productionPrefix: "docflow-",
});

const muiTheme = createTheme({
  ...theme,
  components: {
    MuiCssBaseline: {
      styleOverrides: {
        body: {
          fontSize: "0.875rem",
          lineHeight: 1.43,
          letterSpacing: "0.01071em",
        },
      },
    },
    MuiTypography: {
      defaultProps: {
        variantMapping: {
          body1: "p",
          body2: "span",
        },
      },
    },
    MuiButtonBase: {
      defaultProps: {
        disableRipple: true,
      },
    },
  },
});

declare module "@mui/material/styles" {
  interface Theme {
    palette: typeof theme.palette;
    shadow: typeof theme.shadow;
    typography: typeof theme.typography;
  }
}

export const ThemeProvider = ({ children }: ThemeProviderProps) => (
  <MuiThemeProvider theme={muiTheme}>
    <StylesProvider generateClassName={generateClassName}>
      {children}
    </StylesProvider>
  </MuiThemeProvider>
);

export const ThemeProviderWithStyledEngine = ({
  children,
}: ThemeProviderProps) => (
  <StyledEngineProvider injectFirst>
    <ThemeProvider>
      <CssBaseline />
      {children}
    </ThemeProvider>
  </StyledEngineProvider>
);
