import React, { useEffect, useState } from 'react';
import './App.css';
import { Navbar } from 'react-materialize';
import MakeMoneyMove from './cash/MakeMoneyMove';
import Flow from "./homies/Flow";
import Cash from './cash/Cash';
import Homies from './homies/Homies';
import { BrowserRouter as Router, Route } from "react-router-dom";
import RoutableNavItem from './common/RoutableNavItem';
import axios from 'axios';
import {
  CRIB,
  MAKE_MONEY_MOVE,
  HOMIE_FLOW,
  HOMIES,
  PUT_IN_WORK
} from './RouteNames';
import PutInWork from "./cash/PutInWork";
import ChipSelection from "./originalGangstaOnboarding/ChipSelection";
import {errorToast} from "./common/errorHelpers";


const App = (props) => {
  const [loading, setLoading] = useState(true);
  const [originalGangsta, setOriginalGangsta] = useState({});

  useEffect(() => {
    (async() => {
      try {
        setLoading(true);
        const response = await axios.get(`/api/original_gangstas/0`);
        if (response.status === 200 && response.data){
          setOriginalGangsta(response.data);
        }else{
          errorToast();
        }
      } catch (e) {
        errorToast();
      }
      setLoading(false);
    })();
  }, []);

  const routes = ([
      <Route key='1' exact path={CRIB} component={() => <Cash originalGangsta={originalGangsta} />} />,
      <Route key='2' exact path={HOMIES} component={() => <Homies originalGangsta={originalGangsta} />} />,
      <Route key='3' path={HOMIE_FLOW} component={() => <Flow originalGangsta={originalGangsta} />} />,
      <Route key='4' path={MAKE_MONEY_MOVE} component={() => <MakeMoneyMove originalGangsta={originalGangsta} />} />,
      <Route key='5' path={PUT_IN_WORK} component={() => <PutInWork originalGangsta={originalGangsta} />} />
    ]
  );

  const onboarded = () => originalGangsta.chip_name && originalGangsta.chip_name.length > 0;

  const preloaderCircle = (
    <div className="container">
      <div className="valign-wrapper center-align preloader-circle">
        <div className="preloader-wrapper big active">
          <div className="spinner-layer spinner-blue-only">
            <div className="circle-clipper left">
              <div className="circle" />
            </div>
            <div className="gap-patch">
              <div className="circle" />
            </div>
            <div className="circle-clipper right">
              <div className="circle" />
            </div>
          </div>
        </div>
      </div>
    </div>
  );


  return (
    <Router>
      <div className="navbar-fixed">
        <Navbar brand={<a href='/'>GKS</a>} alignLinks="right">
          <RoutableNavItem href={CRIB}>
            Crib
          </RoutableNavItem>

          <RoutableNavItem href={HOMIES}>
            Homies
          </RoutableNavItem>

          <RoutableNavItem href={MAKE_MONEY_MOVE}>
            Make Money Move
          </RoutableNavItem>

          <RoutableNavItem href={PUT_IN_WORK}>
            Put in Work
          </RoutableNavItem>
        </Navbar>
      </div>

      <div className="autoscrolling">
        { loading && preloaderCircle }
        { !loading && !onboarded() && <ChipSelection /> }
        { !loading && onboarded() && routes }
      </div>
    </Router>
  );
}

export default App;