import '@mantine/core/styles.css';
import '@mantine/notifications/styles.css';
import { Button, Chip, createTheme, InputBase, MantineColorsTuple, MantineProvider, NativeSelect, SegmentedControl, Textarea } from '@mantine/core';

// We actually load the temporal polyfill in index.html. If we don't, it
// doesn't get loaded in time and things break. If temporal isn't loaded inside
// a typescript file, then the language server doesn't know its available. This
// means we put a dummy load of temporal here as well.
if (!("Temporal" in window)) {
	import('temporal-polyfill/global')
}

// vite won't let me do this - use symlink?
// import { theme_color } from "./public/manifest.json";

// TODO: figure out values for custom color entry to
// allow more control of primaryColor; primaryColor is
// NOT a css color
const olive: MantineColorsTuple = [
	"#f3fbe9",
	"#e8f3da",
	"#d1e5b6",
	"#b8d68f",
	"#a3c96d",
	"#96c158",
	"#8ebe4c",
	"#7aa63c",
	"#6c9433",
	"#5a8026"
];

let color = 'olive';
const host = window.location.hostname.split(".");
if (host.length < 2) {
	color = 'indigo';
} else if (host[0] != 'app' && host.length > 2) {
	color = 'orange';
}


const theme = createTheme({
	colors: {
		olive,
	},
	primaryColor: color,
	white: '#FFFFFF', // Used to be FAFAFA, but that created issues with table striping in light mode.
	black: '#303030',
	respectReducedMotion: true, //  why does this default to false?
	scale: 1, // root font-size / 16px
	autoContrast: true,
	luminanceThreshold: 0.25,
	fontFamily: 'sans-serif',
	defaultRadius: 'md',
	components: {
		InputBase: InputBase.extend({
			defaultProps: {
				size: "md",
			},
		}),
		Textarea: Textarea.extend({
			defaultProps: {
				size: "md",
			},
		}),
		Button: Button.extend({
			defaultProps: {
				size: "md",
			},
		}),
		Chip: Chip.extend({
			defaultProps: {
				size: "md",
			},
		}),
		SegmentedControl: SegmentedControl.extend({
			defaultProps: {
				size: "md",
			},
		}),
		NativeSelect: NativeSelect.extend({
			defaultProps: {
				size: "md",
			},
		}),
	},
});

//import { Header } from "/components/Header.js"
//import { Footer } from "/components/Footer.js"

//const obs = new MutationObserver(() => {
//	const elem = document.querySelector(window.location.hash);
//	if (elem != null) {
//		elem.scrollIntoView();
//		obs.disconnect();
//	}
//});

//const handleRoute = evnt => {
//	if (window.location.hash != "") {
//		obs.observe(document.body, {
//			subtree: true,
//			childList: true,
//			attributes: true,
//			attributeFilter: ["id"],
//		});
//	}
//}

import { React, ReactDOM } from "windowpane";
import { RouterProvider } from "react-router";

import { PythonTerminal } from './components/PythonTerminal';

import { router } from "./router";

ReactDOM.createRoot(document.body).render(
	<div><MantineProvider theme={theme} defaultColorScheme='auto'>
		<React.StrictMode>
			<PythonTerminal for="worker" />
			<RouterProvider router={router} />
		</React.StrictMode>
	</MantineProvider></div>
);