import React from "react";
import { formatFilterNumber } from "../lib/helpers";
import {
  CATEGORY_FLAT,
  CATEGORY_HOUSE,
  CATEGORY_OFFICE,
  CATEGORY_LAND
} from '../../crawler/enums';

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 }
    });
  }

  onMaxSizeChange(e) {
    this.props.dispatch({
      type: "SET_MAX_SIZE",
      action: { maxSize: e.target.value }
    });
  }

  onMinSizeChange(e) {
    this.props.dispatch({
      type: "SET_MIN_SIZE",
      action: { minSize: e.target.value }
    });
  }

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

  onCategoryClick(category) {
    this.props.dispatch({type: 'SET_CATEGORY', action: {category}});
  }

  onRefreshClick() {
    this.updateSearch();
  }

  onKeyPress (e) {
    if (e.key === 'Enter') {
      this.updateSearch();
    }
  }

  updateSearch () {
    this.props.dispatch({ type: "UPDATE_SEARCH" });
  }

  render() {
    const { filters } = this.props;
    const selectedRooms = val => filters.rooms[val] ? "selected" : "";
    const selectedCategory = val => filters.category[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"
          />
        </div>

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

          <div className="filter-content value-between-box">
            OD
            <input
              onKeyPress={this.onKeyPress.bind(this)}
              onChange={this.onMinPriceChange.bind(this)}
              value={formatFilterNumber(filters.minPrice)}
            />
            {" "}
            DO

            <input
              onKeyPress={this.onKeyPress.bind(this)}
              onChange={this.onMaxPriceChange.bind(this)}
              value={formatFilterNumber(filters.maxPrice)}
            />
            {this.props.filters.priceDirty
              ?
                <i
                  onClick={this.onRefreshClick.bind(this)}
                  className="fa fa-refresh fa-refresh-custom"
                  aria-hidden="true">
                </i>

              : null}
          </div>
        </div>
        <div className="filter-row filter-property-types">
          <div className="filter-title">
            TIP
          </div>
          <div className="filter-content">
            <div
              onClick={this.onCategoryClick.bind(this, CATEGORY_FLAT)}
              className={`filter-btn property-type-btn ${selectedCategory(CATEGORY_FLAT)}`}>
              Stan
            </div>
            <div
              onClick={this.onCategoryClick.bind(this, CATEGORY_HOUSE)}
              className={`filter-btn property-type-btn ${selectedCategory(CATEGORY_HOUSE)}`}>
              Kuća
            </div>
          </div>
          <div className="filter-content">
            <div
              onClick={this.onCategoryClick.bind(this, CATEGORY_LAND)}
              className={`filter-btn property-type-btn ${selectedCategory(CATEGORY_LAND)}`}>
              Zemljište
            </div>
            <div
              onClick={this.onCategoryClick.bind(this, CATEGORY_OFFICE)}
              className={`filter-btn property-type-btn ${selectedCategory(CATEGORY_OFFICE)}`}>
              Poslovni prostor
            </div>
          </div>
        </div>
        <div className="filter-row">
          <div className="filter-title">
            KVADRATA
          </div>
          <div className="filter-content value-between-box">
            OD
            <input
              onKeyPress={this.onKeyPress.bind(this)}
              value={formatFilterNumber(filters.minSize)}
              onChange={this.onMinSizeChange.bind(this)}
            />

            DO
            {" "}
            <input
              onKeyPress={this.onKeyPress.bind(this)}
              value={formatFilterNumber(filters.maxSize)}
              onChange={this.onMaxSizeChange.bind(this)}
            />
            {this.props.filters.sizeDirty
              ? <i
                  onClick={this.onRefreshClick.bind(this)}
                  className="fa fa-refresh fa-refresh-custom"
                  aria-hidden="true">
                </i>
              : null}
          </div>
        </div>
        <div className="filter-row filter-property-rooms no-border">
          <div className="filter-title">
            BROJ SOBA
          </div>
          <div className="filter-content">
            <div
              onClick={this.onRoomsClick.bind(this, 0)}
              className={
                `filter-btn property-rooms-studio-btn ${selectedRooms(0)}`
              }
            >
              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 className="filter-content">
            <div className="hide filter-btn more-filters">Više Filtera</div>
          </div>
        </div>
        <div className="clear-both" />
        <div className="filter-bottom" />
      </div>
    );
  }
}