import React, { Component } from 'react';
import { Map, GoogleApiWrapper } from 'google-maps-react';
import { Polygon } from 'google-maps-react/dist/components/Polygon';
import Axios from 'axios';

const mapStyles = {
  width: '80%',
  height: '80%'
};

export class MapContainer extends Component {

  constructor(props) {
    super(props);
    this.state = {
      polygons: [],
      // selected: false
    };
  }

  polyClick(e, data) {
    e.setState({"fillColor" : "#00FFFF"})
  }

  getPoly() {
    Axios.get("/load").then(res => {
      return res.data.features
    }).then(data => {
      let polys = data.map((coordinates, index) => {
        return(
          <Polygon
            paths={coordinates}
            onClick={((e) => this.polyClick(e, data))}
            strokeColor="#0000FF"
            strokeOpacity={0.8}
            strokeWeight={2}
            fillColor="#0000FF"
            fillOpacity={0.35} />
        )
      })
      this.setState({polygons: polys});
      console.log(this.state.polygons)
    })
  }

  componentDidMount() {
    this.getPoly();
  }

  render() {
    return(
      <Map google={this.props.google}
          style={{width: '100%', height: '100%', position: 'relative'}}
          className={'map'}
          zoom={14}
          initialCenter={{
            lat: 51.5,
            lng: -0.14
           }}
          >
          {this.state.polygons}

      </Map>
    )
  }
}

export default GoogleApiWrapper({
  apiKey: 'AIzaSyD3DstthrfYiEovv9cql8q8P3UrmgMDCe8'
})(MapContainer);