import React from "react";
import { connect } from "redux-bundler-react";
import classnames from "classnames";
import TreeListContainer from "./tree-list-container";
import debounce from "lodash/debounce";

class TreeviewPanel extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      filterString: props.layerFilterString,
    };

    this.toggleExpanded = this.toggleExpanded.bind(this);
    this.updateFilterString = this.updateFilterString.bind(this);
    this.clearFilterString = this.clearFilterString.bind(this);
    this.renderFilter = this.renderFilter.bind(this);
    this.toggleFilter = this.toggleFilter.bind(this);
    this.addAllLayers = this.addAllLayers.bind(this);
    this.removeAllLayers = this.removeAllLayers.bind(this);
  }
  addAllLayers(e) {
    e.preventDefault();
    e.stopPropagation();
    this.props.doTreeViewAddAll();
  }
  removeAllLayers(e) {
    e.preventDefault();
    e.stopPropagation();
    this.props.doTreeViewRemoveAll();
  }

  toggleExpanded(e) {
    e.preventDefault();
    e.stopPropagation();
    const { doTreeViewToggleExpand } = this.props;

    doTreeViewToggleExpand();
  }

  toggleFilter(e) {
    e.preventDefault();
    e.stopPropagation();
    const { doLayersToggleFilter, layerShowFilter } = this.props;
    this.updateFilterString({ target: { value: "" } });
    doLayersToggleFilter(!layerShowFilter);
  }

  updateFilterString(e) {
    this.setState(
      {
        filterString: e.target.value,
      },
      this.updateLayerFilter
    );
  }

  updateLayerFilter = debounce(() => {
    const { doLayersUpdateFilter } = this.props;
    doLayersUpdateFilter(this.state.filterString);
  }, 200);

  clearFilterString() {
    this.updateFilterString({ target: { value: "" } });
  }

  renderFilter() {
    const { layerShowFilter } = this.props;
    const { filterString } = this.state;
    if (!layerShowFilter) return null;
    return (
      <div>
        <button
          disabled={filterString === ""}
          onClick={this.clearFilterString}
          className="cm-btn cm-btn-link cm-btn-xs pull-right"
          style={{ marginTop: "6px", position: "absolute", right: "5px" }}
        >
          <i className="mdi mdi-close-circle-outline" />
        </button>
        <input
          value={filterString}
          onChange={this.updateFilterString}
          className="cm-form-control cm-input-sm"
          placeholder="Filter Datasets..."
          style={{
            marginBottom: "8px",
            marginRight: "30px",
            paddingRight: "30px",
          }}
        ></input>
      </div>
    );
  }

  render() {
    const { layerShowFilter, treeViewToggleExpanded } = this.props;

    const toggleExpandedText = "";
    const toggleTxt = treeViewToggleExpanded
      ? "Expand All Folders"
      : "Collapse All Folders";
    const toggleExpandedIcon = classnames({
      "icon-inline": !!toggleExpandedText,
      mdi: true,
      "mdi-plus-box-outline": treeViewToggleExpanded,
      "mdi-minus-box-outline": !treeViewToggleExpanded,
    });

    const toggleFilterText = "";
    const filterTxt = layerShowFilter ? "Hide Filter" : "Show Filter";
    const toggleFilterIcon = classnames({
      "icon-inline": !!toggleFilterText,
      mdi: true,
      "mdi-filter-plus-outline": !layerShowFilter,
      "mdi-filter-minus-outline": layerShowFilter,
    });

    return (
      <div id="tree-view" className="sidebar-list thin-scrollbar">
        <div style={{ marginTop: 0, marginBottom: 10 }}>
          <button
            className="cm-btn cm-btn-default cm-btn-xs"
            onClick={this.toggleExpanded}
            style={{ marginRight: "5px" }}
            title={toggleTxt}
          >
            <i className={toggleExpandedIcon} />
            {toggleExpandedText}
          </button>
          <button
            className="cm-btn cm-btn-default cm-btn-xs"
            style={{ marginRight: "5px" }}
            title="Add All Layers"
            onClick={this.addAllLayers}
          >
            <i className="mdi mdi-layers-triple" />
          </button>
          <button
            className="cm-btn cm-btn-default cm-btn-xs"
            style={{ marginRight: "5px" }}
            title="Remove All Layers"
            onClick={this.removeAllLayers}
          >
            <i className="mdi mdi-layers-triple-outline" />
          </button>
          <button
            onClick={this.toggleFilter}
            className="cm-btn cm-btn-default cm-btn-xs"
            title={filterTxt}
          >
            <i className={toggleFilterIcon} />
            {toggleFilterText}
          </button>
        </div>
        {this.renderFilter()}
        <TreeListContainer />
      </div>
    );
  }
}

export default connect(
  "selectLayerShowFilter",
  "selectLayerFilterString",
  "selectTreeViewToggleExpanded",
  "doLayersToggleFilter",
  "doLayersUpdateFilter",
  "doTreeViewToggleExpand",
  "doTreeViewAddAll",
  "doTreeViewRemoveAll",
  TreeviewPanel
);
