import * as React from "react";
import { ThemeProvider, Theme, createTheme } from "@mui/material/styles";
import type { ThemeOptions } from "@mui/material/styles";
import { inputsCustomizations } from "./customizations/inputs";
import { dataDisplayCustomizations } from "./customizations/dataDisplay";
import { feedbackCustomizations } from "./customizations/feedback";
import { navigationCustomizations } from "./customizations/navigation";
import { surfacesCustomizations } from "./customizations/surfaces";
import { colorSchemes, shadows, shape } from "./themePrimitives";

interface AppThemeProps {
	children: React.ReactNode;
	disableCustomTheme?: boolean;
	themeComponents?: ThemeOptions["components"];
}

export default function AppTheme(props: AppThemeProps) {
	const { children, disableCustomTheme, themeComponents } = props;
	const theme = React.useMemo(() => {
		return disableCustomTheme
			? {}
			: createTheme({
					palette: {
						mode: "light",
						background: {
							default: "#DFECF1",
							paper: "#D0E1E9",
						},
						text: {
							primary: "#000000",
							secondary: "#454545",
						},
						success: {
							main: "#00C853",
						},
						error: {
							main: "#F44336",
						},
						divider: "#E0E0E0",
					},
					typography: {
						fontFamily: '"Publica Sans Round Medium", sans-serif',
						h4: {
							fontSize: "2rem",
							fontWeight: 600,
						},
						h6: {
							fontSize: "16px",
							fontWeight: 500,
						},
						body1: {
							fontSize: "1rem",
						},
						body2: {
							fontSize: "0.875rem",
							color: "#b0b0b0",
							fontWeight: 300,
						},
					},
					cssVariables: {
						colorSchemeSelector: "data-mui-color-scheme",
						cssVarPrefix: "template",
					},
					shadows,
					shape: {
						borderRadius: 8,
					},
					components: {
						...inputsCustomizations,
						...dataDisplayCustomizations,
						...feedbackCustomizations,
						...navigationCustomizations,
						...surfacesCustomizations,
						...themeComponents,
					},
			  });
	}, [disableCustomTheme, themeComponents]);

	if (disableCustomTheme) {
		return <React.Fragment>{children}</React.Fragment>;
	}

	return (
		<ThemeProvider theme={theme} disableTransitionOnChange>
			{children}
		</ThemeProvider>
	);
}
