import React, { Component, createRef } from 'react';
import mapboxgl, { MapboxOptions } from 'mapbox-gl';

import { FluidContainer } from 'utils/styles/mixins';

import { MapModuleWrapper, MapElement } from './map-module.styles';

mapboxgl.accessToken = process.env.GATSBY_MAPBOX_ACCESS_TOKEN!;

interface MapProps {
  coordinates: {
    latitude: number;
    longitude: number;
  };
}

export default class Map extends Component<MapProps> {
  private mapContainer = createRef<HTMLDivElement>();

  componentDidMount(): void {
    this.buildMap();
  }

  /**
   * Using ! on this.mapContainer.current to remove undefined / null
   * as we know it will be available on mount
   */
  generateMapConfig(latlng: mapboxgl.LngLatLike): MapboxOptions  {
    return {
      container: this.mapContainer.current!,
      style: 'mapbox://styles/mapbox/streets-v9',
      center: latlng,
      zoom: 16
    };
  }

  buildMap(): void {
    const { coordinates } = this.props;
    const latlng: mapboxgl.LngLatLike = [coordinates.longitude, coordinates.latitude];
    const map = new mapboxgl.Map(this.generateMapConfig(latlng));

    this.addControls(map);
    this.disableZoom(map);
    this.createMarker(map, latlng);
  }

  addControls(map: mapboxgl.Map): void {
    map.addControl(new mapboxgl.NavigationControl());
  }

  disableZoom(map: mapboxgl.Map): void {
    map.scrollZoom.disable();
  }

  createMarker(map: mapboxgl.Map, latlng: any): void {
    new mapboxgl.Marker().setLngLat(latlng).addTo(map);
  }

  render(): JSX.Element {
    return (
      <MapModuleWrapper>
        <div
          css={MapElement}
          ref={this.mapContainer}
        />
      </MapModuleWrapper>
    );
  }
}