import React from 'react';

export default class Filters extends React.Component {

  onCloseClick(e) {
    if (this.props.onClose) {
      this.props.onClose();
    }
  }

  onMaxPriceChange (e) {
    this.props.dispatch({type: 'SET_MAX_PRICE', action: {maxPrice: e.target.value}})
  }

  onMinPriceChange (e) {
    this.props.dispatch({type: 'SET_MIN_PRICE', action: {minPrice: e.target.value}})
  }

  onRoomsClick(rooms) {
    console.log('rooms:', rooms);
    this.props.dispatch({type: 'SET_ROOMS', action: {rooms}});
  }

  onRefreshClick () {
    this.props.dispatch({type: 'UPDATE_SEARCH'});
  }

  render() {

    const {filters} = this.props;

    const selectedRooms = (val) => filters.rooms[val] ? 'selected' : '';

    return (
      <div className="filters">
        <div className="filters-close">
          Uslovi Pretrage
          <i onClick={this.onCloseClick.bind(this)}
            className="close-icon fa fa-times"
            aria-hidden="true"></i>
        </div>

        <div className="filter-row">
          <div className="filter-title">
            CIJENA
          </div>

          <div className="filter-content value-between-box">
            izmedju <input value={`${this.props.filters.minPrice}`} onChange={this.onMinPriceChange.bind(this)}></input> KM i <input onChange={this.onMaxPriceChange.bind(this)}></input>
            {this.props.filters.dirty? <button onClick={this.onRefreshClick.bind(this)}>Refresh</button>: null}
          </div>

        </div>
        <div className="filter-row filter-property-types">
          <div className="filter-title">
            TIP
          </div>
            <div className="filter-content">
              <div className="filter-btn property-type-btn">
                Stan
              </div>
              <div className="filter-btn property-type-btn">
                Kuća
              </div>
            </div>
            <div className="filter-content">
              <div className="filter-btn property-type-btn">
                Zemljište
              </div>
              <div className="filter-btn property-type-btn">
                Poslovni prostor
              </div>
            </div>
        </div>
        <div className="filter-row">
          <div className="filter-title">
            KVADRATA
          </div>
          <div className="filter-content value-between-box">
              izmedju <input></input>
              i <input></input>
          </div>
        </div>
        <div className="filter-row filter-property-rooms">
          <div className="filter-title">
            BROJ SOBA
          </div>
          <div className="filter-content">
            <div onClick={this.onRoomsClick.bind(this, 'Garsonjera')} className={`filter-btn property-rooms-studio-btn ${selectedRooms('Garsonjera')}`}>
              Garsonjera
            </div>
            <div onClick={this.onRoomsClick.bind(this, 2)} className={`filter-btn property-rooms-btn ${selectedRooms(2)}`}>
              2
            </div>
            <div onClick={this.onRoomsClick.bind(this, 3)} className={`filter-btn property-rooms-btn ${selectedRooms(3)}`}>
              3
            </div>
            <div onClick={this.onRoomsClick.bind(this, '4+')} className={`filter-btn property-rooms-btn ${selectedRooms('4+')}`}>
              4+
            </div>
          </div>
        </div>
        <div className="filter-row no-border">
          <div className="filter-title">
          </div>
          <div className="filter-content">
            <div className="filter-btn more-filters">Više Filtera</div>
          </div>
        </div>
        <div className="clear-both">
        </div>
        <div className="filter-bottom">
        </div>
      </div>)
  }
}