import React from 'react';
import Filters from './Filters';
import Listings from './Listings';
import ListingDetails from './ListingDetails';
import { pacSelectFirst } from '../helpers/googleMaps';
import {loadProperties} from '../lib/api'
import {handleMessage} from '../lib/handlers'

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      listingDetails: false,
      listings: (new Map()),
      imageIndex: 0,
      filters: {
        minPrice: 0,
        rooms: {}
      }
    };
  }

  dispatch ({type, action = {}}) {
    console.log('DISPATCH', this);
    handleMessage({type, action}, this);
  }

  componentDidMount() {
    const uluru = {lat: 43.845031, lng: 18.4019262};
    const map = new google.maps.Map(this.refs.map, {
      zoom: 13,
      center: uluru,
      streetViewControl: false,
      mapTypeControl: false
    });
    const marker = new google.maps.Marker({
      position: uluru,
      map: map
    });

    var control = document.createElement('div');
    control.classList.add('filters-btn-toggle');
    control.innerHTML = '<button>Filters</button>';
    //control.style = "top: 200px;"
    control["style"]= "top: 200px;"

    var input = document.getElementById('gmaps-places-input');

    pacSelectFirst(input);
    var options = {
      componentRestrictions: {country: "BA"}
    };
    var searchBox = new google.maps.places.Autocomplete(input, options);

    searchBox.addListener('place_changed', () => {
      var place = searchBox.getPlace();

      if (!place.geometry) {
        return;
      }

      if (place.geometry.viewport) {
        map.fitBounds(place.geometry.viewport);

      } else {
        map.setCenter(place.geometry.location);
        map.setZoom(18);
      }
      console.log(map.getBounds());
      this.dispatch({type: 'SEARCH_PLACE_CHANGED'});
    });

    control.addEventListener('click', (e) => {
      this.setState({
        mapClicked: true
      });
    });


    control.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
    this.map = map;

    map.addListener('idle', () => {
      const properties = loadProperties({
        bounds: map.getBounds().toUrlValue(),
        minPrice: this.state.filters.minPrice});

        properties.then(p=> p.text()).then(p => {
          const data = JSON.parse(p);
          console.log('props', data)
          for(const [index, prop] of data.entries()) {
            const myLatLng = {lat: prop.loc[0], lng: prop.loc[1]};

            const marker = new google.maps.Marker({
              position: myLatLng,
              map: map,
              title: prop.title
            });

            marker.addListener('click', () => {
              console.log('clicking...')
              this.dispatch({type: 'VIEW_LISTING_DETAILS', action: {
                id: prop.url
              }})
            });
          }

          this.dispatch({
            type: 'LISTINGS_LOADED',
            action: {
              listings: data
            }
          });
        })
    });
  }

  onCloseClick(e) {
    if (this.state.mapClicked) {
      setTimeout(() => {
        google.maps.event.trigger(this.map, 'resize');
      }, 100);
    }

    this.setState({
      mapClicked: false
    });
  }

  onListingClick() {
    this.setState({
      listingDetails: true
    })
  }

  onBackClick() {
    this.setState({
      listingDetails: false
    })
  }

  renderRightContent() {

    const children = [];

    if (this.state.listingDetails) {
      console.log('CURRENT LISTINGS', this.state.listings);
      const listing = this.state.listings.get(this.state.listingId);
      console.log(this.state);
      children.push(<ListingDetails
        listing={listing}
        imageIndex={this.state.imageIndex}
        dispatch={this.dispatch.bind(this)}
        descriptionExpanded={this.state.descriptionExpanded}
        onBackClick={this.onBackClick.bind(this)}/>);
    } else {
      children.push(<Filters filters={this.state.filters} dispatch={this.dispatch.bind(this)} onClose={this.onCloseClick.bind(this)}/>);
      children.push(<Listings
        listings={this.state.listings}
        dispatch={this.dispatch.bind(this)}
        onListingClick={this.onListingClick.bind(this)}/>);
    }
    const content = (
      <div className="right-content">
        {children}
      </div>);

    return content;
  }

  render() {
    const leftStyle      = {};
    const rightStyle     = {};
    const listingDetails = true;

    let leftClass    = 'left-base';
    let rightClass   = 'right-base';

    if (this.state.mapClicked) {
      leftClass = 'left-hidden';
      rightClass = 'right-shown';
    }

    return (
      <div id="container">
        <div id="header">
          <a className="hamburger-menu">K</a>
          <span className="title">Kiwi</span>
          <input
            id="gmaps-places-input"
            placeholder="Unesite adresu, naselje ili grad"
            className="where-to"
            type="text"></input>
          <div className="view-types">
            <a className="view-type-left">
              <i className="btn-select-map fa fa-list"></i>
            </a>
            <a className="view-type-right">
              <i className="view-type-map-icon fa fa-map-marker"></i>
            </a>
          </div>
        </div>

        <div id="right" style={rightStyle} className={rightClass}>
          {this.renderRightContent()}
        </div>

        <div id="left" style={leftStyle} className={leftClass}>
          <div id="map" ref="map">
          </div>
        </div>
      </div>
    )
  }
}
export default Main;