import React from 'react';
import {
  Container,
  Row,
  Col,
} from 'reactstrap';
import {
  NotificationContainer,
  NotificationManager,
} from 'react-notifications';
import Api from '../Components/Api';
import MapItem from '../Components/Map';
import VegetablesList from '../Components/Vegetables';

export default class RouterVegetables extends React.Component {
  constructor(props) {
    super(props);

    this.state = {
      typeId: props.match.params.typeId,
      selectedType: {},
      selectedVegetable: {},
    };

    this.getItem = this.getItem.bind(this);
    this.selectVegetable = this.selectVegetable.bind(this);

    this.getItem();
    this.props.changeBackground('vegetables')
  }

  getItem() {
    Api.get(`/types/${this.state.typeId}`)
      .then((res) => {
        this.setState({
          selectedType: res.data,
        });
      })
      .catch(() => {
        NotificationManager.error('Erreur lors de la récupération des végétaux');
      });
  }

  selectVegetable(vegetable) {
    this.setState({
      selectedVegetable: vegetable,
    });
  }

  render() {
    return (
      <Container>
        <NotificationContainer />
        <Row>

          <Col xs="12" md="6">
            <MapItem
              selectedType={this.state.selectedType}
              selectedVegetable={this.state.selectedVegetable}
              selectVegetable={this.selectVegetable}
            />
          </Col>
          <Col xs="12" md="6">
            <Row>
              <Col xs="12">
                <VegetablesList
                  selectedType={this.state.selectedType}
                  selectedVegetable={this.state.selectedVegetable}
                  selectVegetable={this.selectVegetable}
                  double={true}
                />
              </Col>
            </Row>
          </Col>
        </Row>
      </Container>
    );
  }
}
