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

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

import { AppState } from '../main/backend';
import PatternPreview from './PatternPreview';
import GraphVisualization from './Graph';
import ConfigControls from './ConfigControls';
import { BongoCat } from './BongoCat';

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

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

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

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

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

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

  return <>
    {
      state
        ? <Frontend state={state} />
        : <div> oops </div>
    }
  </>;
};


const Frontend: React.FC<{ state: AppState }> = ({ state }) => {

  return <div className="container">
    <ConfigControls updateDelay={state.trackerConfig.zeroCrossingBeatDelay} />
    <div>
      <BongoCat onClick={tap} beatProgress={state.beatProgress} />
    </div>
    <div style={{ width: "80%", marginTop: 80 }} className="element-row">
      {
        Object.entries(state.patterns).map(([patternId, output]) => (
          <PatternPreview selected={state.selectedPattern === patternId} key={patternId} patternId={patternId} output={output} />
        ))
      }
    </div>
    {
      state.graphData
        ? <div>
          <p> Bass Filtered </p>
          <p>
            <GraphVisualization points={state.graphData.bassFiltered} />
          </p>
          <p> Autocorrelation </p>
          <p>
            <GraphVisualization points={state.graphData.autoCorrelated} />
          </p>
        </div>
        : <div> no graph data </div>
    }
  </div>;
}


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