// React/component imports
import React, {useEffect, useState} from 'react';
import TimeSelector from './components/TimeSelector.js';
import Visualization from './components/Visualization.js';
import HubList from './components/HubList.js';
import Loading from './components/Loading.js';
import Modal from './components/Modal.js';

// CSS import
import './css/App.css';

/**
 * Main component of the app. Holds the main layout of the big components.
 * @returns {import('react').HtmlHTMLAttributes} A div of the body of the page.
 */
function App() {
  // State to open app when loaded
  const [hasLoaded, setHasLoaded] = useState(false);
  // State indicate if canvas is redrawing
  const [isChanging, setIsChanging] = useState(false);
  // State to hold dates -> two weeks apart on initialization.
  const [dates, setDates] = useState({
    start: new Date(Date.now() - 12096e5),
    end: new Date()
  });
  // State for visualization data
  const [data, setData] = useState([]);
  // State for selected person
  const [selected, setSelected] = useState(-1);

  const toEpochMilli = date => Date.parse(date);
  const getGraphData = () => {
    fetch("http://localhost:4567/data", {
        method: "POST",
        body: JSON.stringify({ 
          start:  toEpochMilli(dates.start), 
          end:    toEpochMilli(dates.end) 
        }),
        headers: {
          "Content-Type": "application/json",
        },
        credentials: "same-origin"
    })
    .then(res  => res.json())
    .then(data => {
      setData(data.holders);
      setHasLoaded(true);
    })
    .catch(err => console.log(err));

    setIsChanging(false);
  }


  // Hooks to update data on init and switching of data
  useEffect(() => getGraphData(), []);
  useEffect(() => {
    setIsChanging(true);
    getGraphData();
  }, [dates]);

  return (
    <>
      {(!hasLoaded) ? <Loading></Loading> :     
        <div className="App">
          <Modal>PHP</Modal>
          <header className="App-header">Welcome to WatchDogs!</header>
          <div className="Canvas-filler Canvas-filler-1"></div>
          <div className="Canvas-filler Canvas-filler-2"></div>
          <div className="Canvas-filler Canvas-filler-3"></div>
          <HubList setHasLoaded={setHasLoaded} data={data} setSelected={setSelected} selected={selected} dates={dates}></HubList>
          <TimeSelector isChanging={isChanging} dates={dates} setDates={setDates}></TimeSelector>
          <Visualization hasLoaded={hasLoaded} data={data} setSelected={setSelected}></Visualization>
        </div>
      }
    </>
  );
}

export default App;