import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { createDevTools } from "redux-devtools";
//import { nicinabox } from "redux-devtools-themes";
//import ChartMonitor from "redux-devtools-chart-monitor";
import LogMonitor from "redux-devtools-log-monitor";
import { InteropStore } from "./types";
import ConfigClient from "../../clients/configClient";
import root from "./modules/root";
import { System } from "../../common/system";

// Uncomment this code and the associated imports to enable the ChartMonitor
/*
const theme = nicinabox;

const chartMonitorStyle = {
	width: "100%",
	height: "100%", // i.e fullscreen for DockMonitor
	text: {
		colors: {
			default: theme.base0D,
			hover: theme.base06,
		},
	},
	node: {
		colors: {
			default: theme.base0B,
			collapsed: theme.base0B,
			parent: theme.base0E,
		},
		radius: 5,
	},
};


const DevTools = createDevTools(
	<ChartMonitor style={chartMonitorStyle} widthBetweenNodesCoeff={1} heightBetweenNodesCoeff={2} />
);
*/

export const logMonitor = <LogMonitor theme="solarized" />;
const DevTools = createDevTools(logMonitor);

const DevToolsContainer = () => {
	const dispatch = useDispatch();
	const isVisible = useSelector((store: InteropStore) => store.root.isVisible);

	const makeVisible = () => {
		//  Make certain visibility only runs once
		System.Window.getCurrent().removeEventListener("shown", makeVisible);
		window.removeEventListener("focus", makeVisible);
		if (!isVisible) dispatch(root.actions.windowVisible(true));
	};

	useEffect(() => {
		ConfigClient.getValue(
			{ field: "finsemble.services.interopService.visible" },
			(err: any, isVisibleValue?: boolean) => {
				dispatch(root.actions.windowVisible(!!isVisibleValue));
			}
		);

		System.Window.getCurrent().addEventListener("shown", makeVisible);

		window.addEventListener("focus", makeVisible);
	}, []);

	return <>{isVisible && <DevTools />}</>;
};

export { DevToolsContainer };

export default DevTools;