import {PureComponent} from 'react';
import Leaflet from 'leaflet';
import cities from '../../mocks/cities';

const initData = {
  ZOOM: 12
};

const ICON = Leaflet.icon({
  iconUrl: `img/pin.svg`,
  iconSize: [27, 39],
  iconAnchor: [13, 39]
});

class Map extends PureComponent {
  constructor(props) {
    super(props);
  }

  addMarkers(cards, group) {
    cards.map((card) => {
      Leaflet.marker(card.coords, {icon: ICON}).addTo(group);
    });
  }

  render() {
    return (
      <div id="map"
        ref={
          (ref) => {
            this.container = ref;
          }
        }
      />
    );
  }

  componentDidMount() {
    const {cards} = this.props;

    setTimeout(() => {
      this.map = Leaflet.map(this.container, {
        center: cities.get(cards[0].city),
        zoom: initData.ZOOM,
        zoomControl: false,
        layers: new Leaflet.TileLayer(`https://{s}.basemaps.cartocdn.com/rastertiles/voyager/{z}/{x}/{y}{r}.png`, {
          attribution: `&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors &copy; <a href="https://carto.com/attributions">CARTO</a>`
        })
      }, 100);

      this.markers = Leaflet.layerGroup().addTo(this.map);
      this.addMarkers(cards, this.markers);
    });
  }

  componentDidUpdate() {
    const {cards} = this.props;

    if (this.map) {
      this.map.setView(cities.get(cards[0].city), initData.ZOOM);
      this.markers.clearLayers();
      this.addMarkers(cards, this.markers);
    }
  }
}

Map.propTypes = {
  cards: PropTypes.arrayOf(PropTypes.shape({
    id: PropTypes.number.isRequired,
    coords: PropTypes.array,
    price: PropTypes.number.isRequired,
    rating: PropTypes.number.isRequired,
    image: PropTypes.string.isRequired,
    title: PropTypes.string.isRequired,
    type: PropTypes.string.isRequired,
    isPremium: PropTypes.bool.isRequired,
    isBookmark: PropTypes.bool.isRequired
  })).isRequired
};

export default Map;