import React, {Component} from 'react';
import {Provider} from 'react-redux';
import { ConnectedRouter } from 'connected-react-router'
import './App.css';
import { Route, Switch } from 'react-router-dom';
import Home from './containers/Home';
import TopicsList from './containers/TopicsList';
import store from './store/configureStore';
import history from './history';
import Header from "./components/Header";
import Footer from "./components/Footer";
import Search from "./components/Search";
import Nav from "./components/Nav";
import Video from "./containers/Video";

class App extends Component {
  render() {
    console.log('store', history, store);
    return (
      <Provider store={store}>
        <ConnectedRouter history={ history }>
          <div className="App">
            <Header/>
            <Search/>
            <Switch>
              <Route exact={true} path="/" component={Home}/>
              <Route path="/topics" component={TopicsList}/>
              <Route path="/videos/:videoId" component={Video}/>
            </Switch>
            <Nav/>
            <Footer/>
          </div>
        </ConnectedRouter>
      </Provider>
    );
  }
}

export default App;