import React from 'react';
import Filters from './Filters';
import Listings from './Listings';

class Main extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
    };
  }

  componentDidMount() {
    const uluru = {lat: -25.363, lng: 131.044};
    const map = new google.maps.Map(this.refs.map, {
      zoom: 4,
      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.addEventListener('click', (e) => {
      this.setState({
        mapClicked: true
      });
    });
    control.index = 1;
    map.controls[google.maps.ControlPosition.TOP_RIGHT].push(control);
  }

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

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

    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">
          Kivi {this.state.mapClicked ? 'YEs': 'No'}
        </div>

        <div id="right" style={rightStyle} className={rightClass}>
          <div className="right-content">
        <div className="filters-close-button">
          <button onClick={this.onCloseClick.bind(this)}>Close me!</button>
        </div>
            <Filters />
            <Listings />
          </div>
        </div>

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