/* global google */
import React, { Component } from "react";
import { Map, Polygon, GoogleApiWrapper } from "google-maps-react";
import Axios from 'axios';

export class MapContainer extends Component {
  constructor(props) {
    super(props);
    this.polygonRef = React.createRef();
    this.state = {
      toggleColor: false,
      data: [],
      polygons: []
    };
    this.fillColors = ["#8686B3","#F14288"];
  }

  setPolygonOptions = options => {
    this.polygonRef.current.polygon.setOptions(options);
  };

  handleClick = e => {
    const currentColor = this.state.toggleColor
      ? this.fillColors[0]
      : this.fillColors[1];
    this.setPolygonOptions({ fillColor: currentColor });
    this.setState(prevState => ({
      toggleColor: !prevState.toggleColor
    }));
  };

  getPoly(){
    Axios.get("/load").then(res => {
      return res.data.features
    }).then(data => {
        this.setState({data: data})
    })
  }

  componentDidMount() {
    this.getPoly();
  }

  render() {
    let polys = this.state.data.map((coordinates, index) => {
        return(
          <Polygon
            key={index}  // La til indexen som en key for å kunne finne igjen angitt Polygon
            ref={this.polygonRef}
            onClick={this.handleClick}
            paths={coordinates}
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor={this.fillColors[0]}
            fillOpacity={0.35}
           />
        )
      })

    return (
      <div className="map-container">
        <Map
          google={this.props.google}
          className={"map"}
          zoom={14}
          initialCenter={{
            lat: 51.5,
            lng: -0.14
           }}
        >
        {polys}
        </Map>
      </div>
    );
  }
}

export default GoogleApiWrapper({
  apiKey: ""
})(MapContainer);