// TODO: add settings functionality, refer to whensapp project

import { createTheme, ThemeProvider } from "@mui/material/styles";
import { FC, ReactNode } from "react";

interface UserThemeProviderProps {
  children: ReactNode;
}

export const UserThemeProvider: FC<UserThemeProviderProps> = ({ children }) => {
  // palette and accent settings
  const userPalette = {
    primary: {
      // light: '#a1c3f9',
      main: "#8ab4f8",
      // dark: '#4285f4',
    },
    secondary: {
      // light: '#a1c3f9',
      main: "#8ab4f8",
      // dark: '#4285f4',
    },
    error: {
      light: "#e57373",
      main: "#f44336",
      dark: "#d32f2f",
    },
    warning: {
      light: "#ffb74d",
      main: "#ffa726",
      dark: "#f57c00",
    },
    info: {
      light: "#a1c3f9",
      main: "#8ab4f8",
      dark: "#4285f4",
    },
    success: {
      light: "#81c784",
      main: "#66bb6a",
      dark: "#388e3c",
    },
    grey: {
      50: "#fafafa",
      100: "#f5f5f5",
      200: "#eeeeee",
      300: "#e0e0e0",
      400: "#bdbdbd",
      500: "#9e9e9e",
      600: "#757575",
      700: "#616161",
      800: "#424242",
      900: "#212121",
      A100: "#f5f5f5",
      A200: "#eeeeee",
      A400: "#bdbdbd",
      A700: "#616161",
    },
    background: {
      paper: "#303134",
      default: "#202124",
    },
  };

  const fontFamily = "GoogleSans";

  const fontSize = 14;

  const userTheme = createTheme({
    typography: {
      fontFamily: fontFamily,
      fontSize: fontSize,
    },
    palette: {
      mode: "dark",
      ...userPalette,
    },
    transitions: {
      duration: {
        shortest: 200,
        shorter: 200,
        short: 200,
        // most basic recommended timing
        standard: 200,
        // this is to be used in complex animations
        complex: 200,
        // recommended when something is entering screen
        enteringScreen: 200,
        // recommended when something is leaving screen
        leavingScreen: 200,
      },
    },
    components: {
      MuiButton: {
        styleOverrides: {
          root: { textTransform: "none" },
        },
      },
      MuiTab: {
        styleOverrides: {
          root: {
            textTransform: "none",
          },
        },
      },
    },
  });

  return <ThemeProvider theme={userTheme}>{children}</ThemeProvider>;
};
