import React from 'react';
import {
  Row,
  Col,
  Tooltip,
} from 'reactstrap';
import {
  FaMapMarkerAlt,
} from 'react-icons/fa';
import {
  Link,
} from 'react-router-dom';
import strToSlug from '../StrToSlug';

import '../css/Map.css';

const MapDimensions = {
  width: 734,
  height: 530,
};

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

    this.state = {
      selectedType: this.props.selectedType,
      selectedVegetable: this.props.selectedVegetable,
      Map: {
        width: '20px',
        height: '20px',
      },
      tooltipOpen: false,
    };

    this.selectVegetable = this.selectVegetable.bind(this);
    this.setMap = this.setMap.bind(this);
    this.toggle = this.toggle.bind(this);
  }

  componentWillReceiveProps(newProps) {
    const {
      selectedType,
      selectedVegetable,
    } = this.state;

    if (newProps.selectedType !== selectedType || newProps.selectedVegetable !== selectedVegetable) {
      this.setState(prevState => ({
        ...prevState,
        selectedType: newProps.selectedType,
        selectedVegetable: newProps.selectedVegetable,
      }), this.setMap);

    }
  }

  componentDidMount() {
    window.addEventListener('resize', this.setMap);
    this.setMap();
  }

  componentWillUnmount() {
    window.removeEventListener('resize', this.setMap);
  }

  setMap() {
    const width = document.getElementById('MapContainer').clientWidth;
    let MapWidth = MapDimensions.width;
    let MapHeight = MapDimensions.height;

    MapWidth = width;
    MapHeight = Math.round(MapDimensions.height * MapWidth / MapDimensions.width);

    if (this.props.setHeight) {
      this.props.setHeight(MapHeight)
    }

    this.setState({
      Map: {
        width: MapWidth,
        height: MapHeight,
      },
    });
  }

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

  toggle(id) {
    this.setState(prevState => ({
      tooltipOpen: prevState.tooltipOpen === id ? false : id,
    }));
  }

  createLink(vegetable) {
    let url = '/vegetaux/';
    if (vegetable.Type) {
      url += `${vegetable.Type.id}-${strToSlug(vegetable.Type.name)}`;
    } else {
      url += `${this.state.selectedType.id}-${strToSlug(this.state.selectedType.name)}`;
    }
    url += `/${vegetable.id}-${strToSlug(vegetable.name)}`;

    return url;
  }

  render() {
    return (
      <Row className="with-margin">
        <Col className="with-border with-background">
          <div id="MapContainer">
            <div className="map" style={{ width: this.state.Map.width, height: this.state.Map.height }}>
              {
                this.state.selectedType
                && this.state.selectedType.Vegetables
                && this.state.selectedType.Vegetables.map((vegetable, key) => (
                  <Link
                    to={this.createLink(vegetable)}
                    key={key}
                    className={`mapMarker ${this.state.selectedVegetable && this.state.selectedVegetable.id === vegetable.id ? 'selected' : ''}`}
                    style={{ left: `calc(${vegetable.lat}% - 16px)`, top: `calc(${vegetable.lng}% - 16px)` }}
                    onMouseOver={e => this.selectVegetable(vegetable)}
                  >
                    <Tooltip placement="top" isOpen={this.state.tooltipOpen === vegetable.id} target={`Tooltip-${vegetable.id}`} toggle={() => this.toggle(vegetable.id)}>
                      {vegetable.name}
                    </Tooltip>
                    <FaMapMarkerAlt id={`Tooltip-${vegetable.id}`} />
                  </Link>
                ))
              }
            </div>
          </div>
        </Col>
      </Row>
    );
  }
}
