import React, { useState } from 'react';
import Router from 'route-lite';
import { Fab, createMuiTheme, ThemeProvider } from '@material-ui/core';
import Create from './Create';

const darkTheme = createMuiTheme({
  palette: {
    type: 'dark',
    primary: {
      main: '#a6d4fa',
    },
  },
});

const Routes = (props) => (
  <Router>
    <Create />
  </Router>
);

const App = () => {
  const [visible, setVisible] = useState(false);
  const PartyRoutesWrapper = document.getElementById('party-routes-wrapper');
  if (visible) {
    document.body.classList.add('visible');
    PartyRoutesWrapper && PartyRoutesWrapper.classList.add('visible');
  } else {
    document.body.classList.remove('visible');
    PartyRoutesWrapper && PartyRoutesWrapper.classList.remove('visible');
  }
  return (
    <ThemeProvider theme={darkTheme}>
      <div className="party-content-wrapper">
        <div id="party-routes-wrapper">
          <Routes />
        </div>
        <Fab onClick={() => setVisible(!visible)} className="watch-party-fab">
          <span />
        </Fab>
      </div>
    </ThemeProvider>
  );
};

export default App;