import React, { useState } from 'react';
import { BrowserRouter as Router, Route } from "react-router-dom";
import { AnimatedSwitch } from 'react-router-transition';
import { makeStyles } from '@material-ui/core/styles';
import Chrome from './Chrome';
import Home from '../Home';
import Principles from '../Principles';
import Cards from '../library/Cards';
import Progress from '../library/ProgressBar';
import NotFound from './NotFound';

const useStyles = makeStyles(theme => ({
  content: {
    flexGrow: 1,
  }
}));

export default function Routing ({onToggle, version}) {
  const custom = useStyles();
  const [headline, setHeadline] = useState('null');
  const [index, setIndex] = useState('null');

  return (
    <Router>
      <Chrome onToggle={onToggle} version={version} headline={headline} index={index} />
      <AnimatedSwitch
        atEnter={{ opacity: 0 }}
        atLeave={{ opacity: 0 }}
        atActive={{ opacity: 1 }}
        className="switch-wrapper"
      >
        <Route
          path="/"
          exact
          render={(props) =>
            <div className={custom.content}>
              {setHeadline('Blocks Design System')}
              {setIndex(0)}
              <Home {...props} />
            </div>
          }
        />
        <Route
          path="/principles/"
          render={(props) =>
            <div className={custom.content}>
              {setHeadline('Core Design Principles')}
              {setIndex(1)}
              <Principles {...props} />
            </div>
          }
        />
        <Route
          path='/components/cards/'
          render={(props) =>
            <div className={custom.content}>
              {setHeadline('Component: Cards')}
              {setIndex(14)}
              <Cards {...props} />
            </div>
          }
        />
        <Route
          path='/components/progress-bar/'
          render={(props) =>
            <div className={custom.content}>
              {setHeadline('Component: Progress Bar')}
              {setIndex(15)}
              <Progress {...props} />
            </div>
          }
        />
        <Route
          path='*'
          render={(props) =>
            <div className={custom.content}>
              {setHeadline('Page Not Found')}
              {setIndex('null')}
              <NotFound />
            </div>
          }
        />
      </AnimatedSwitch>
    </Router>
  )
}
