import React from 'react';

export default class Filters extends React.Component {

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

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

  render() {

    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></input>
          </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 className="filter-btn property-rooms-studio-btn">
              Garsonjera
            </div>
            <div className="filter-btn property-rooms-btn">
              2
            </div>
            <div className="filter-btn property-rooms-btn">
              3
            </div>
            <div className="filter-btn property-rooms-btn">
              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>)
  }
}