address component

import React, { Component } from 'react';
import {AutosuggestComponent as Autosuggest} from './autosuggest.component';
import axios from 'axios';

export class AddressComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      reveal: false,
      addressSuggestions: [],
      countryOptions: [],
      address: {
        address_1: '',
        address_2: '',
        address_town: '',
        address_county: '',
        address_postcode: '',
        address_country: {
          id: '',
          name: ''
        }
      }
    };
  }

  componentDidMount() {
    axios.get('/api/meta/countries')
      .then((result) => {
        this.setState({countryOptions: result.data});
      });
  }


  // Event handler for field changes
  updateField = (event) => {

    const key = event.target.name;
    let value;

    if (event.target.value.toLocaleLowerCase() === 'yes') {
      value = true;
    } else if (event.target.value.toLocaleLowerCase() === 'no') {
      value = false;
    } else {
      value = event.target.value;
    }

    this.setState({[key]: value});
  };

  countryChange = (country) => {
    let address = this.state.address;
    address.address_country = country;
    this.setState({ address });
  };

  changePostcode = (event) => {
    let address = this.state.address;
    address.postcode = event.target.value;
    this.setState({ address });
  };



  // Address lookup
  lookupPostcode = () => {
    axios.get('/postcodelookup/' + this.state.address.postcode)
      .then((response) => {
        this.setState({addressSuggestions: response.data});
        this.setAddressToSuggestion(response.data[0]);
      });
  };

  setAddressToSuggestion(suggestion) {
    this.setState({
      address: {
        address_1: suggestion.address1,
        address_2: suggestion.address2,
        address_town: suggestion.city,
        address_county: suggestion.county,
        address_postcode: suggestion.postcode,
        address_country: this.state.address.address_country
      }
    });
  }

  selectSuggestion = (event) => {
    const index = parseInt(event.target.value, 10);
    this.setAddressToSuggestion(this.state.addressSuggestions[index]);
  };



  // Rendering
  getMainAddressSection() {
    const address = this.state.address;

    if (this.state.address.address_country.name === null || this.state.address.address_country.name.length === 0) {
      return null;
    }

    return (
      <div>
        <div className="form-group " id="registered_address_1-wrapper">
          <label className="form-label" htmlFor="registered_address_1">
            Building and street (optional)
          </label>
          <input
            id="registered_address_1"
            className="form-control"
            name="registered_address_1"
            onChange={this.updateField}
            value={address.address_1}
          />
        </div>
        <div className="form-group " id="registered_address_2-wrapper">
          <label className="form-label hidden" htmlFor="registered_address_2">Address line 1</label>
          <input
            id="registered_address_2"
            className="form-control"
            name="registered_address_2"
            onChange={this.updateField}
            value={address.address_2}
          />
        </div>
        <div className="form-group " id="registered_address_town-wrapper">
          <label className="form-label" htmlFor="registered_address_town">
            Town or city (optional)
          </label>
          <input
            id="registered_address_town"
            className="form-control"
            name="registered_address_town"
            onChange={this.updateField}
            value={address.address_town}
          />
        </div>
        <div className="form-group " id="registered_address_county-wrapper">
          <label className="form-label" htmlFor="registered_address_county">
            County / region (optional)
          </label>
          <input
            id="registered_address_county"
            className="form-control"
            name="registered_address_county"
            onChange={this.updateField}
            value={address.address_county}
          />
        </div>
        <div className="form-group form-group--postcode" id="registered_address_postcode-wrapper">
          <label className="form-label" htmlFor="registered_address_postcode">
            Postcode (optional)
          </label>
          <input
            id="registered_address_postcode"
            className="form-control"
            name="registered_address_postcode"
            onChange={this.updateField}
            value={address.address_postcode}
          />
        </div>
      </div>
    );
  }

  addressSuggestions() {
    if (this.state.addressSuggestions === null || this.state.addressSuggestions.length === 0) {
      return null;
    }

    const options = this.state.addressSuggestions
      .map((suggestion, index) => <option value={index} key={index}>{suggestion.address1}</option>);

    return (
      <div className="form-group form-group--pick-address">
        <label className="form-label">Pick an address</label>
        <select
          className="form-control"
          onChange={this.selectSuggestion}
        >
          {options}
        </select>
      </div>
    );
  }

  getPostcodeLookupSection() {

    if (this.state.address.address_country !== null && this.state.address.address_country.name === 'United Kingdom') {
      const addressSuggestions = this.addressSuggestions();

      return (
        <div className="address__lookup-wrapper">
          <div className="form-group form-group--postcode" id="operatingAddress.postcode-wrapper">
            <label className="form-label" htmlFor="registered-postcodelookup">Postcode</label>
            <input
              className="form-control postcode-lookup-value"
              autoComplete="off"
              value={this.state.lookupPostcode}
              onChange={this.changePostcode}
            />
            <button
              className="button button-secondary lookup-postcode-button"
              onClick={this.lookupPostcode}
            >
              Find UK Address
            </button>
          </div>
          {addressSuggestions}
        </div>
      );
    }

    return null;

  }

  render() {
    return (
      <fieldset className="fieldset--address">
        <Autosuggest
          label='Country'
          suggestions={this.state.countryOptions}
          onChange={this.countryChange}
          value={this.state.address.address_country}
        />

        { this.getPostcodeLookupSection() }
        { this.getMainAddressSection() }

      </fieldset>
    );
  }

  static propTypes = {
    onChange: React.PropTypes.func.isRequired,
    label: React.PropTypes.string.isRequired
  }

}