import React from 'react';
import {
  ListGroup,
  ListGroupItem
} from 'reactstrap';
import {
  Link
} from 'react-router-dom';
import strToSlug from '../StrToSlug'

import '../css/Vegetables.css'

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

    this.state = {
      selectedType: this.props.selectedType,
      selectedVegetable: this.props.selectVegetable
    }
  }

  componentWillReceiveProps(newProps) {
    this.setState(newProps);
  }

  render() {
    return (

      <div className="with-margin">
        <div className=" with-border with-background">
          <ListGroup className='vegetables--types--group'>
            {
              this.state.selectedType &&
              this.state.selectedType.Vegetables &&
              this.state.selectedType.Vegetables.map((vegetable, key) =>
                (
                  <ListGroupItem
                    key={key}
                    className={this.state.selectedVegetable.id === vegetable.id ? "selected" : "null"}
                    onMouseOver={(e) => this.props.selectVegetable(vegetable)}
                  >
                    <Link to={`/vegetaux/${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}/${vegetable.id}-${strToSlug(vegetable.name)}`}>
                      {vegetable.name}
                    </Link>

                  </ListGroupItem>
                )
              )
            }
          </ListGroup>
        </div>
      </div>
    );
  }
}