import * as ReactDOM from "react-dom/client";
import "@fontsource/source-sans-pro/300.css";
import "@fontsource/source-sans-pro/400.css";
import "@fontsource/source-sans-pro/600.css";
import "@fontsource/source-sans-pro/700.css";
import CssBaseline from "@mui/material/CssBaseline";
import { ThemeProvider, createTheme } from "@mui/material/styles";

import Wrapper from "./Wrapper";

import "./styles.css";

function App() {
	return <Wrapper/>;
}

const theme = createTheme({
/*	palette: {
		background: {
			default: "#c5cbe3;"
		}
	},*/
	typography: {
		fontFamily: "Source Sans Pro,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Fira Sans,Droid Sans,Helvetica Neue,sans-serif",
		fontWeightBold: 700,
		fontWeightMedium: 600,
		fontWeightRegular: 400,
		fontWeightLight: 300
	},
	components: {
		MuiTableCell: {
			styleOverrides: {
				head: {
					fontWeight: 700
				}
			}
		},
		MuiInputBase: {
			styleOverrides: {
				input: {}
			}
		}
	}
});

function waitForElm(selector) {
	return new Promise(resolve => {
		if (document.querySelector(selector)) {
			return resolve(document.querySelector(selector));
		}

		const observer = new MutationObserver(() => {
			if (document.querySelector(selector)) {
				observer.disconnect();
				resolve(document.querySelector(selector));
			}
		});

		observer.observe(document.documentElement, {
			childList: true,
			subtree: true
		});
	});
}

waitForElm('#react_insert').then((elm) => {
	console.log('Element is ready');
	const root = ReactDOM.createRoot(elm);
	root.render(
	//var appDiv = document.createElement("div");
	//document.body.appendChild(appDiv);
	//ReactDOM.createRoot(appDiv).render(
		<ThemeProvider theme={theme}>
			<CssBaseline />
			<App />
		</ThemeProvider>
	);
});