import React from "react";
import ReactDOM from "react-dom";
import { Provider, useDispatch, useSelector } from "react-redux";
import InteropService from "./InteropService";
import store from "./store";
import { DevToolsContainer } from "./DevTools";
import root from "./modules/root";
import { InteropStore } from "./types";
import { System } from "../../common/system";

const HeartbeatButton = () => {
	const dispatch = useDispatch();
	const state: InteropStore = useSelector((currentState: any) => currentState);

	const heartbeatAction = state.root.heartbeats ? "Stop Heartbeats" : "Start Heartbeats";

	const toggleHeartbeats = () => {
		dispatch(root.actions.toggleHeartbeats());
	};

	return <button onClick={toggleHeartbeats}>{heartbeatAction}</button>;
};

const InteropServiceUI = () => {
	const blah = 0;

	return (
		<Provider store={store}>
			<HeartbeatButton />
			<div className="devTools">
				<DevToolsContainer />
			</div>
		</Provider>
	);
};

const main = async () => {
	// Sets the window to hide rather than close (hideOnClose) when the end user closes from the window frame
	const finWindow = System.Window.getCurrent();
	finWindow.addEventListener("close-requested", () => {
		finWindow.hide();
	});
};

main();

ReactDOM.render(<InteropServiceUI />, document.getElementById("InteropServiceUI-tsx"));

// This line is necessary for the service to start, otherwise webpack thinks it's not being used and doesn't run the file InteropService.ts
const interopService = InteropService;