import React, { useState, useEffect } from 'react';
import Router from 'route-lite';
import { Fab, createMuiTheme, ThemeProvider, Snackbar } from '@material-ui/core';
import Create from './Create';
import Loading from './Loading';
import firebase from 'firebase/app';
import 'firebase/firestore';
import Inactive from './Inactive';
import { getUserUid } from './Api';

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

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

const App = () => {
  const closedNotification = { open: false, message: '' };

  const [status, setStatus] = useState({ active: false, message: '' });
  const [visible, setVisible] = useState(false);
  const [loading, setLoading] = useState(false);
  const [notification, setNotification] = useState(closedNotification);

  useEffect(() => {
    setLoading(true);
    getUserUid();
    firebase
      .firestore()
      .collection('server')
      .doc('status')
      .onSnapshot((statusSnap) => {
        setStatus(statusSnap.data());
        setLoading(false);
      });
  }, []);

  // HANDLE VISIBILITY STYLING
  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');
  }

  // HANDLE FULLSCREEN EVENT
  document.onfullscreenchange = () => {
    if (document.fullscreenElement) setVisible(false);
  };

  return (
    <ThemeProvider theme={darkTheme}>
      <Snackbar
        className="party-notification-container"
        anchorOrigin={{ vertical: 'bottom', horizontal: 'right' }}
        open={notification.open}
        onClose={() => setNotification(closedNotification)}
        message={notification.message}
        resumeHideDuration={500}
        autoHideDuration={2000}
      />
      <div className="party-content-wrapper">
        <div id="party-routes-wrapper">
          {loading && <Loading />}
          {status.active ? (
            <Routes
              updateLoading={setLoading}
              notify={(message) => setNotification({ open: true, message })}
            />
          ) : (
            <Inactive status={status} />
          )}
        </div>
        <Fab onClick={() => setVisible(!visible)} className="watch-party-fab">
          <span />
        </Fab>
      </div>
    </ThemeProvider>
  );
};

export default App;