import React from "react";
import { connect } from "redux-bundler-react";
import ToggleExpand from "./tree-view-toolbar/toggle-expand";
import AddAll from "./tree-view-toolbar/add-all";
import RemoveAll from "./tree-view-toolbar/remove-all";
import ToggleFilter from "./tree-view-toolbar/toggle-filter";
import Favorites from "./tree-view-toolbar/favorites";
import FavoritesContainer from "./favorites-container";
import Defaults from "./tree-view-toolbar/defaults";
import DefaultsContainer from "./defaults-container";
import TreeListContainer from "./tree-list-container";
import debounce from "lodash/debounce";
import classnames from "classnames";

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

    this.toggleFilter = this.toggleFilter.bind(this);
    this.updateFilterString = this.updateFilterString.bind(this);
    this.clearFilterString = this.clearFilterString.bind(this);
    this.renderFilter = this.renderFilter.bind(this);
  }

  toggleFilter() {
    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;
    const inputStyle = {
      marginBottom: "8px",
      marginRight: "30px",
      paddingRight: "30px",
    };
    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={inputStyle}
        ></input>
      </div>
    );
  }

  render() {
    const {
      treeViewControls,
      treeViewToggleFavoritesView,
      treeViewToggleUserDefaultLayersView,
      primaryPanelShowClose,
      primaryPanelShowFavoritesBtn,
      primaryPanelShowUserDefaultLayersBtn,
    } = this.props;

    const listClass = classnames({
      "sidebar-list": !primaryPanelShowClose,
      "thin-scrollbar": true,
      "sidebar-list-show-close-btn": primaryPanelShowClose,
    });

    return (
      <div id="tree-view" className={listClass}>
        <div style={{ marginTop: 0, marginBottom: 10 }}>
          {treeViewControls.indexOf("toggleExpand") > -1 ? (
            <ToggleExpand />
          ) : null}
          {treeViewControls.indexOf("addAll") > -1 ? <AddAll /> : null}
          {treeViewControls.indexOf("removeAll") > -1 ? <RemoveAll /> : null}
          {treeViewControls.indexOf("toggleFilter") > -1 ? (
            <ToggleFilter toggleFilter={this.toggleFilter} />
          ) : null}

          {primaryPanelShowFavoritesBtn ? <Favorites /> : null}
          {primaryPanelShowUserDefaultLayersBtn ? <Defaults /> : null}
        </div>
        {this.renderFilter()}

        {treeViewToggleFavoritesView ? (
          <FavoritesContainer />
        ) : (
          null
        )}

        {treeViewToggleUserDefaultLayersView ? (
          <DefaultsContainer />
        ) : (
          null
        )}

        {!treeViewToggleFavoritesView && !treeViewToggleUserDefaultLayersView ? (
          <TreeListContainer />
        ) : (
          null
        )}
      </div>
    );
  }
}
export default connect(
  "selectLayerShowFilter",
  "selectLayerFilterString",
  "selectTreeViewControls",
  "selectPrimaryPanelShowFavoritesBtn",
  "selectPrimaryPanelShowUserDefaultLayersBtn",
  "selectTreeViewToggleFavoritesView",
  "selectTreeViewToggleUserDefaultLayersView",
  "doLayersToggleFilter",
  "doLayersUpdateFilter",
  "selectPrimaryPanelShowClose",
  TreeviewPanel
);
