import React, { useEffect, useState } from 'react';
import './App.css';
import { Navbar, Dropdown, Icon } 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,
  GANGS,
  MAKE_MONEY_MOVE,
  HOMIE_FLOW,
  HOMIES,
  PUT_IN_WORK
} from './RouteNames';
import PutInWork from "./cash/PutInWork";
import GangOnboarding from "./gangOnboarding/GangOnboarding";
import Gangs from './gangs/Gangs';
import {errorToast} from "./common/errorHelpers";


const App = (props) => {
  const [loading, setLoading] = useState(true);
  const [gangs, setGangs] = useState([]);
  const [selectedGang, setSelectedGang] = useState({});

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

  const routes = ([
      <Route key='1' exact path={CRIB} component={() => <Cash gang={selectedGang} />} />,
      <Route key='2' exact path={GANGS} component={() => <Gangs gangs={gangs} gangsSetter={setGangs} />} />,
      <Route key='3' exact path={HOMIES} component={() => <Homies gang={selectedGang} />} />,
      <Route key='4' path={HOMIE_FLOW} component={() => <Flow gang={selectedGang} />} />,
      <Route key='5' path={MAKE_MONEY_MOVE} component={() => <MakeMoneyMove gang={selectedGang} />} />,
      <Route key='6' path={PUT_IN_WORK} component={() => <PutInWork gang={selectedGang} />} />
    ]
  );

  const onboarded = () => selectedGang.chip_name && selectedGang.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>
  );

  const navbarLogoWithGang = (
    <div>
      <a href='/'>GKS</a>

      <Dropdown
        id="gang_dropdown"
        options={{
          alignment: 'left',
          autoTrigger: true,
          closeOnClick: true,
          constrainWidth: true,
          coverTrigger: false,
          hover: false,
          inDuration: 150,
          outDuration: 250
        }}
        trigger={<a className="bump">{selectedGang && selectedGang.name && selectedGang.name.length > 0 ? `${selectedGang.name} gang` : '[No name gang]'}<Icon right>arrow_drop_down</Icon></a>}
      >
        {gangs.map(gang => <a key={`gang-${gang.id}`} onClick={() => setSelectedGang(gang)}>{gang.name}</a>)}
      </Dropdown>
    </div>
  );


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

          <RoutableNavItem href={GANGS}>
            Gangs
          </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() && <GangOnboarding gang={selectedGang} /> }
        { !loading && onboarded() && routes }
      </div>
    </Router>
  );
}

export default App;