import { CssBaseline } from "@mui/material";
import {
  createTheme,
  ThemeProvider as MUIThemeProvider,
  StyledEngineProvider,
} from "@mui/material/styles";
import PropTypes from "prop-types";
import { useMemo } from "react";
import logo from "../assets/images/logo/app.svg";
import componentsOverrides from "./overrides";

import palette from "./palette";
import shadows, { customShadows } from "./shadows";
import typography from "./typography";
import merge from "lodash.merge";

export default function ThemeProvider({ children }) {
  const themeOptions = useMemo(
    () => ({
      palette,
      shape: {
        borderRadius: 4,
        borderRadiusComponent: 8,
        roundButtonRadius: 24,
        outlinedBorderWidth: 1.5,
        outlinedInputPadding: 12.5,
        outlinedTabHeight: 34,
      },
      spacing: 10,
      typography,
      shadows,
      customShadows,
      fontFamily: {
        regular: "Inter-Regular",
        medium: "Inter-Medium",
        semiBold: "Inter-SemiBold",
        bold: "Inter-Bold",
        heavy: "Inter-ExtraBold",
        light: "Inter-Light",
        GraphikMedium: "GraphikMedium",
      },
      logo,
    }),
    []
  );

  const theme = useMemo(() => {
    const baseTheme = createTheme(themeOptions);
    const componentsOverride = componentsOverrides(baseTheme);

    return createTheme(baseTheme, {
      components: merge({}, componentsOverride, themeOptions.components),
    });
  }, [themeOptions]);

  // const theme = createTheme(themeOptions);
  // theme.components = componentsOverride(theme);

  return (
    <StyledEngineProvider injectFirst>
      <MUIThemeProvider theme={theme}>
        <CssBaseline />
        {children}
      </MUIThemeProvider>
    </StyledEngineProvider>
  );
}

ThemeProvider.propTypes = {
  children: PropTypes.node,
};
