import React, { Component, Fragment } from 'react';
import ReactGA from 'react-ga';
import {
  BrowserRouter as Router, Route,
  Switch,
} from 'react-router-dom';
import Header from './Header';
import Map from '../Routes/Map';
import Search from '../Routes/Search';
import Home from '../Routes/Home';
import Vegetables from '../Routes/Vegetables';
import Vegetable from '../Routes/Vegetable';

ReactGA.initialize('UA-138332682-1');
ReactGA.pageview(window.location.pathname + window.location.search);

class App extends Component {
  static changeBackground(background) {
    document.body.style.background = `url('/background/${background}.jpg') no-repeat fixed`;
    document.body.style.backgroundSize = 'cover';
    document.body.style.backgroundPosition = 'center center';
  }

  render() {
    return (
      <Fragment>
        <Header />
        <Router>
          <Switch>
            <Route
              exact
              path="/"
              render={props => <Home {...props} changeBackground={App.changeBackground} />}
            />
            <Route
              exact
              path="/carte"
              render={props => <Map {...props} changeBackground={App.changeBackground} />}
            />
            <Route
              exact
              path="/recherche/:query"
              render={props => <Search {...props} changeBackground={App.changeBackground} />}
            />
            <Route
              exact
              path="/vegetaux/:typeId-:typeSlug"
              render={props => <Vegetables {...props} changeBackground={App.changeBackground} />}
            />
            <Route
              exact
              path="/vegetaux/:typeId-:typeSlug/:vegetableId-:vegetableSlug"
              render={props => <Vegetable {...props} changeBackground={App.changeBackground} />}
            />
          </Switch>
        </Router>
      </Fragment>
    );
  }
}

export default App;
