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

export default class Filters extends React.Component {
  onCloseClick(e) {
    if (this.props.onClose) {
      this.props.onClose();
    }
  }

  onMaxPriceChange(e) {
    const maxPrice = e.target.value;

    this.props.dispatch({
      type: "SET_MAX_PRICE",
      action: { maxPrice }
    });
  }

  onMinPriceChange(e) {
    const minPrice = e.target.value;

    this.props.dispatch({
      type: "SET_MIN_PRICE",
      action: { minPrice }
    });
  }

  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: "UPDATE_ROUTE",
      action: {
        params: { rooms }
      }
    });

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

  onCategoryClick(category) {
    this.props.dispatch({
      type: "UPDATE_ROUTE",
      action: {
        params: { category }
      }
    });

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

  onRefreshClick(closeFilters) {
    this.updateSearch();

    if (closeFilters) {
      this.props.dispatch({
        type: "CLOSE_FILTERS"
      });
    }
  }

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

  updateSearch() {
    const { minPrice, maxPrice, minSize, maxSize } = this.props.filters;

    this.props.dispatch({
      type: "UPDATE_ROUTE",
      action: {
        params: {
          minPrice,
          maxPrice,
          minSize,
          maxSize
        }
      }
    });
    this.props.dispatch({ type: "UPDATE_SEARCH" });
  }

  onResetSearch(e) {
    this.props.dispatch({
      type: "RESET_FILTERS"
    });
  }

  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"
                />
              : 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"
                />
              : 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 onClick={this.onResetSearch.bind(this)} className="filter-btn">
            Poništi
          </div>
          <div
            onClick={this.onRefreshClick.bind(this, true)}
            className="filter-btn confirm"
          >
            Potvrdi
          </div>

        </div>
      </div>
    );
  }
}
