import React, { Component, Fragment } from 'react';
import Header from './Header';
import {
  BrowserRouter as Router, Route,
  Switch,
} from 'react-router-dom';
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';

class App extends Component {
  constructor(props) {
    super(props)

    this.state = {
      background: 1
    }

    this.changeBackground = this.changeBackground.bind(this);
  }

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

export default App;