'use strict';

import React from "react";

import loadGoogleMapsAPI from 'load-google-maps-api';

class AddressInput extends React.Component {
  render() {
    return (
      <form onSubmit={this.props.submitForm}>
        <textarea
          value={this.props.addressesText}
          onChange={this.props.updateAddresses}
          >
        </textarea>
        <input type="submit" value="Geocode!" />
      </form>
    )
  }
}

class GeoCodeResults extends React.Component {
  constructor(props) {
    super(props)

    loadGoogleMapsAPI({
      key: 'AIzaSyBYcspIcoTdiADRpZogplY7NP0B5UnjyIw'
    }).then((google) => {
      this.geocoder = new google.Geocoder();
    }).catch((err) => {
      console.error(err);
    });

    this.state = {
      geocodedAddresses: {}
    }
  }

  shouldComponentUpdate(nextProps, nextState) {
    console.log(this.state)
    console.log(nextState)
    console.log(this.props)
    console.log(nextProps)
    return (this.props.addresses.join('') !== nextProps.addresses.join('')) ||
      (Object.keys(this.state.geocodedAddresses).join('') !== Object.keys(nextState.geocodedAddresses).join(''))
      // (Object.keys(nextState.geocodedAddresses).length != nextProps.addresses.length)
  }

  geocodeAddress() {
    const addrs = this.props.addresses

    const that = this
    for (var i = 0; i < addrs.length; i++) {
      (function() {
        var addr = addrs[i];
        that.geocoder.geocode( { 'address': addr}, function(results, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            var location = results[0].geometry.location;

            const geocodedAddresses = that.state.geocodedAddresses
            geocodedAddresses[addr] = {
              lat: location.lat(),
              lng: location.lng()
            }
            that.setState({
              geocodedAddresses: geocodedAddresses
            })
          } else {
            console.log("Error looking up address" + addr);
            // alert("Geocode was not successful for the following reason: " + status);
          }
        });
      })();
    };
  }

  render() {
    this.geocodeAddress()

    const geocodedAddresses = this.state.geocodedAddresses

    const Geocoded = Object.keys(geocodedAddresses).map(function(key, idx) {
      const geocodedAddress = geocodedAddresses[key]

      return (
        <tr key={idx}>
          <td>{key}</td><td>{geocodedAddress.lat}</td><td>{geocodedAddress.lng}</td>
        </tr>
      )
    })

    if (Geocoded.length) {
      return (
        <div>
          <table>
            <thead>
              <tr><th>Address</th><th>Latitude</th><th>Longitude</th></tr>
            </thead>
            <tbody>
              {Geocoded}
            </tbody>
          </table>
        </div>
      )
    }
    return (<div></div>)
  }
}

class BulkGeocoding extends React.Component {
  constructor(props) {
    super(props)

    this.state = {
      addresses_text: '',
      addresses: []
    }

    this.updateAddresses = this.updateAddresses.bind(this)
    this.submitForm = this.submitForm.bind(this)
  }

  updateAddresses(event) {
    this.setState({
      addressesText: event.target.value
    })
  }

  submitForm(event) {
    const addresses = this.state.addressesText.split('\n')

    this.setState({
      addresses: addresses
    })

    event.preventDefault()
  }

  render() {
    return (
      <div className="flex">
        <div className="left-sidebar">
          <AddressInput
            addressesText={this.state.addressesText}
            updateAddresses={this.updateAddresses}
            submitForm={this.submitForm}
            />
        </div>
        <div className="right-sidebar">
          <GeoCodeResults addresses={this.state.addresses} />
        </div>
      </div>
    )
  }
}

export default BulkGeocoding

@@ -782,452 +782,8 @@
  %7D%0A%0A
-  shouldComponentUpdate(nextProps, nextState) %7B%0A    console.log(this.state)%0A    console.log(nextState)%0A    console.log(this.props)%0A    console.log(nextProps)%0A    return (this.props.addresses.join('') !== nextProps.addresses.join('')) %7C%7C%0A      (Object.keys(this.state.geocodedAddresses).join('') !== Object.keys(nextState.geocodedAddresses).join(''))%0A      // (Object.keys(nextState.geocodedAddresses).length != nextProps.addresses.length)%0A  %7D%0A%0A
   ge
@@ -795,24 +795,24 @@
 Address() %7B%0A
+
     const ad
@@ -955,16 +955,98 @@
 drs%5Bi%5D;%0A
+%0A        if (addr in that.state.geocodedAddresses) %7B%0A          return;%0A        %7D%0A%0A
         
@@ -1583,16 +1583,18 @@
  address
+: 
 %22 + addr
@@ -1600,96 +1600,8 @@
 r);%0A
-            // alert(%22Geocode was not successful for the following reason: %22 + status);%0A
     

Fix geocoding