import React, { useEffect } from 'react';
import './css/bootstrap.min.css'
import './css/style.min.css'
import { Route, Switch } from "react-router-dom";

import history from "./components/history/history";

import Header from './components/Header/Header';
import Main from './components/page/Main/Main';
import Services from './components/page/Services/Services';
import Microfinance from './components/page/Microfinance/Microfinance';
import Agents from './components/page/Agents/Agents';
import Bonuses from './components/page/Bonuses/Bonuses';
import Advantages from './components/page/Advantages/Advantages';
import Devices from './components/page/Devices/Devices';
import Contact from './components/page/Contact/Contact';
import Become from './components/page/Become/Become';
import Choise from './components/page/Choise/Choise';
import {
  CSSTransition,
  TransitionGroup,
} from 'react-transition-group';

const routes = ["/", "/services", "/microfinance", "/agents", "/bonuses", "/advantages"];
var i = 0;

const handleScroll = (e, count, setCount) => {
  if (e.wheelDelta / 120 > 0) {
    if (i>0) {
      i=i-1;
    }
    history.push(routes[i]);
  }
  else {
    if (i<6) {
      i=i+1;
    }
    history.push(routes[i]);
  }
};

function App() {

  useEffect(e => {
    window.addEventListener("mousewheel", e => handleScroll(e));

    return () => {
      window.removeEventListener("mousewheel", handleScroll(e));
    };
  }, []);
  return (
    <div className="App">
      <Header />
      <Route history={history} render={({location}) => (
          <TransitionGroup>
            <CSSTransition
              key={location.key}
              timeout={300}
              classNames="fade"
            >
              <Switch location={location}>
                <Route exact path="/" component={Main} />
                <Route path="/services" render={() => <Services />}  />
                <Route path="/microfinance" component={Microfinance} />
                <Route path="/agents" component={Agents} />
                <Route path="/bonuses" component={Bonuses} />
                <Route path="/advantages" component={Advantages} />
                <Route path="/devices" component={Devices} />
                <Route path="/contact" component={Contact} />
                <Route path="/become" component={Become} />
                <Route path="/choise" component={Choise} />
              </Switch>
            </CSSTransition>
          </TransitionGroup>
        )} />
    </div>
  );
}

export default App;