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, typography, shadows, shape } from "./themePrimitives";

declare module "@mui/styles/defaultTheme" {
	interface DefaultTheme extends Theme {
		vars: object;
	}
}

interface AppThemeProps {
	children: React.ReactNode;
	/**
	 * This is for the docs site. You can ignore it or remove it.
	 */
	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: "dark", // Enforcing dark mode across the app
						background: {
							default: "#111111", // Dark background color
							paper: "#1e1e1e", // Darker background for cards, containers, etc.
						},
						text: {
							primary: "#ffffff", // White text for readability
							secondary: "#b0b0b0", // Lighter secondary text
						},
					},
					cssVariables: {
						colorSchemeSelector: "data-mui-color-scheme",
						cssVarPrefix: "template",
					},
					typography,
					shadows,
					shape,
					components: {
						...inputsCustomizations,
						...dataDisplayCustomizations,
						...feedbackCustomizations,
						...navigationCustomizations,
						...surfacesCustomizations,
						...themeComponents,
					},
			  });
	}, [disableCustomTheme, themeComponents]);

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

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