import { getMuiTheme, lightBaseTheme, MuiThemeProvider } from 'material-ui/styles';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { BrowserRouter as Router, Link, Route } from 'react-router-dom';
import * as injectTapEventPlugin from 'react-tap-event-plugin';
import { About, Home, Topics } from './components';
import Hello from './components/hello';

import './favicon.ico';
import './index.scss';

const lightMuiTheme = getMuiTheme(lightBaseTheme);

injectTapEventPlugin();

ReactDOM.render(
  <MuiThemeProvider muiTheme={lightMuiTheme}>
    <Router>
      <div>
        <ul>
          <li>
            <Link to="/">Home</Link>
          </li>
          <li>
            <Link to="/about">About</Link>
          </li>
          <li>
            <Link to="/topics">Topics</Link>
          </li>
        </ul>

        <hr />

        <Hello />

        <Route exact={true} path="/" component={Home} />
        <Route path="/about" component={About} />
        <Route path="/topics" component={Topics} />
      </div>
    </Router>
  </MuiThemeProvider>
  ,
  document.getElementById('example')
);