import { MemoryRouter as Router, Switch, Route } from 'react-router-dom';
import { IpcRenderer } from 'electron/renderer';

import './App.css';
import { useEffect, useState } from 'react';

const ipcRenderer = (window as any).electron.ipcRenderer as IpcRenderer;

function tap() {
  ipcRenderer.send("beat-tracking", "tap");
}

const Frontend: React.FC = () => {

  const [state, setState] = useState<any>();

  const pollMain = async () => {
    const reply = await ipcRenderer.invoke("poll");
    setState(reply);
  }

  useEffect(() => {
    const interval = setInterval(pollMain, 20);
    return () => clearInterval(interval);
  });

  return <>
    <div>
      State: {state ? JSON.stringify(state) : "undef"}
    </div>
    <div>
      <button onClick={tap}>Tap</button>
    </div>
  </>;
};

export default function App() {
  return (
    <Router>
      <Switch>
        <Route path="/" component={Frontend} />
      </Switch>
    </Router>
  );
}