import React from 'react';
import './App.css';

import {
  BrowserRouter as Router,
  Route,
  Switch,
  Redirect,
} from 'react-router-dom';

import { Provider } from '@scripters/use-socket.io';
import { RecoilRoot } from 'recoil';
import { nanoid } from 'nanoid';
import { useParams } from 'react-router-dom';

import { C2CProvider } from './hooks/useC2C';
import BoardView from './views/BoardView';

const SOCKET_URL = process.env.REACT_APP_SOCKET_URL || 'http://localhost:4000';
const SOCKET_PATH = process.env.REACT_APP_SOCKET_PATH || '/socket.io';

const SOCKET_OPTIONS = {
  forceNew: true,
  path: SOCKET_PATH,
};

const room = 'test';

const genRoomName = () => {
  return nanoid();
};

/**
 * Micro component to give room url parameters to C2CProvider
 */
export const ConnectedBoardView = () => {
  const { room } = useParams();

  return (
    <C2CProvider room={room}>
      <BoardView />
    </C2CProvider>
  );
};

function App() {
  return (
    <RecoilRoot>
      <Provider url={SOCKET_URL} options={SOCKET_OPTIONS}>
        <div className='App'>
          <Router>
            <Switch>
              <Route path='/room/:room/'>
                <ConnectedBoardView />
              </Route>
              <Redirect path='/room/' to={`/room/${genRoomName()}`} />
              {/*<Route exact path='/home'>
                  <HomePage />
              </Route>*/}
              <Redirect from='/' to='/room/' />
            </Switch>
          </Router>
        </div>
      </Provider>
    </RecoilRoot>
  );
}

export default App;