import React, { useState, useEffect } from "react";
import { useDispatch } from "react-redux";
import { fetchPoiRequest } from "./redux/actions/poiActions";
import { poiList } from "./data/data";
import { Poi } from "./redux/types/Poi";

import DropDown from "./components/generalInformation/dropdown/DropDown";
import DemographicsSection from "./sections/demographics";
import FootfallSection from "./sections/footfall";
import ModeSection from "./sections/mode";
import DescriptionSection from "./sections/description";
import InformationSection from "./sections/information";
import DrawerSection from "./sections/drawer";
import TraficSection from "./sections/trafic";
import MapSection from "./sections/map";
import GraphSections from "./components/main/GraphSections";

import "./styles/global/App.css";
import "./styles/global/customScrollBar.css";

const App = () => {
  const [selectedPoi, setSelectedPoi] = useState<Poi>(poiList.items[0]);
  const [isFootfallSection, setFootfallSection] = useState(true);
  const [isModeSection, setModeSection] = useState(true);
  const [isDemographicsSection, setDemographicsSection] = useState(true);
  const [isInformationSection, setInformationSection] = useState(true);
  const [isTraficSection, setTraficSection] = useState(true);
  const [isMapView, setIsMapView] = useState(false);

  const dispatch = useDispatch();

  useEffect(() => {
    dispatch(fetchPoiRequest());
  }, [dispatch]);

  return (
    <div className="rootContent">
      <DrawerSection
        poiList={poiList.items}
        setSelectedPoi={setSelectedPoi}
        isFootfallSection={isFootfallSection}
        setFootfallSection={setFootfallSection}
        isModeSection={isModeSection}
        setModeSection={setModeSection}
        isDemographicsSection={isDemographicsSection}
        setDemographicsSection={setDemographicsSection}
        isInformationSection={isInformationSection}
        setInformationSection={setInformationSection}
        isTraficSection={isTraficSection}
        setTraficSection={setTraficSection}
        isMapView={isMapView}
        setIsMapView={setIsMapView}
      />

      {isMapView ? (
        <MapSection selectedPoi={selectedPoi} />
      ) : (
        <div className="mainContent">
          <br></br>
          <DropDown
            poiList={poiList.items}
            selectedPoi={selectedPoi}
            setSelectedPoi={setSelectedPoi}
          />
          <GraphSections
            selectedPoi={selectedPoi}
            isDemographicsSection={isDemographicsSection}
            isFootfallSection={isFootfallSection}
            isModeSection={isModeSection}
            isInformationSection={isInformationSection}
            isTraficSection={isTraficSection}
          />
        </div>
      )}
    </div>
  );
};

export default App;