import 'bootstrap/dist/css/bootstrap.min.css'
import 'react-simple-dropdown/styles/Dropdown.css'
import 'stylesheets/app.sass'
import 'bootstrap/dist/js/bootstrap.bundle.min.js';
import React, { Component } from 'react'
import { Redirect } from 'react-router'
import { Provider } from 'react-redux'
import configureStore from 'store'
import { BrowserRouter, Route, Switch } from 'react-router-dom'
import shortId from 'shortid'
import Home from 'components/Home'
import { hasTouchSupport } from './utils/dom'

const store = configureStore()

export default class Root extends Component {
  componentWillMount() {
    if (hasTouchSupport) {
      document.body.classList.add('touch')
    }
  }

  render() {
    return (
      <Provider store={store}>
        <BrowserRouter>
          <div className="h-100">
            <Switch>
              <Route exact path="/" render={() => <Redirect to={`/${shortId.generate()}`} />} />
              <Route path="/:roomId" component={Home} />
            </Switch>
          </div>
        </BrowserRouter>
      </Provider>
    )
  }
}