import React from "react";
import { connect } from "redux-bundler-react";
import classnames from "classnames";
import { forEach } from "lodash";

class TreeListItemFolder extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      contentEditable: false,
      text: props.item.displayName,
      folderChecked: false,
    };
    this.keyDown = this.keyDown.bind(this);
    this.toggleCollapsed = this.toggleCollapsed.bind(this);
    this.toggleContentEditable = this.toggleContentEditable.bind(this);
    this.setText = this.setText.bind(this);
    this.saveToStore = this.saveToStore.bind(this);
    this.toggleSelectAllVisible = this.toggleSelectAllVisible.bind(this);
  }

  
  keyDown(e) {
    if (e.keyCode === 13) {
      e.preventDefault();
      this.saveToStore();
    }
  }

  toggleCollapsed() {
    const { item, doTreeSetCollapsed } = this.props;
    doTreeSetCollapsed(item.uid, !item.collapsed);
  }

  toggleContentEditable(e) {
    const el = e.currentTarget;
    this.setState(
      {
        contentEditable: !this.state.contentEditable,
      },
      () => {
        const txt = el.innerHTML;
        this.tempText = txt;
      }
    );
  }

  toggleSelectAllVisible(e) {
    const folderChecked = e.currentTarget.checked;
    const { item, doTreeSetCollapsed, doLayerSetVisible } = this.props;

    this.setState({
      folderChecked: folderChecked,
    });

    doTreeSetCollapsed(item.uid, !folderChecked);
    item.children.map((layer) => {
      doLayerSetVisible(layer.uid, folderChecked);
    });
  }

  setText(e) {
    const el = e.currentTarget;
    const txt = el.innerHTML;
    this.setState({ text: txt });
  }

  saveToStore() {
    const { item, doTreeUpdate } = this.props;
    this.setState(
      {
        contentEditable: false,
      },
      function () {
        doTreeUpdate(item.uid, {
          displayName: this.state.text,
        });
      }
    );
  }

  render() {
    const { item, isOver, treeViewHideCounter, treeViewShowSelectAll } =
      this.props;
    const { contentEditable, text, folderChecked } = this.state;
    const { folderHoverText } = item;

    if (!item.passFilter) return null;

    const folderDisplay = folderHoverText ? folderHoverText : null;

    const itemClass = classnames({
      "tree-list-item-hover": isOver,
    });
    const iconClass = classnames({
      mdi: true,
      "mdi-folder-open": !item.collapsed,
      "mdi-folder": item.collapsed,
    });
    const fontStyle = contentEditable ? "italic" : "normal";
    const divStyle = {
      fontStyle: fontStyle,
      display: "inline-block",
      paddingLeft: "8px",
    };

    const count = item.children.length;

    return (
      <div>
        <i
          title={folderDisplay}
          onClick={this.toggleCollapsed}
          className={iconClass}
          style={{ fontSize: "16px", cursor: "pointer" }}
        ></i>
        {treeViewShowSelectAll && item.selectAllLayers ? (
          <label className={itemClass} title={`Select All Layers`}>
            <span>&nbsp;&nbsp;</span>
            <input
              type="checkbox"
              checked={folderChecked}
              value={folderChecked}
              onChange={this.toggleSelectAllVisible}
            />
          </label>
        ) : null}
        <span>
          <div
            className={itemClass}
            style={divStyle}
            onInput={this.setText}
            onBlur={this.saveToStore}
            onKeyDown={this.keyDown}
            onDoubleClick={this.toggleCollapsed}
            contentEditable={contentEditable}
            dangerouslySetInnerHTML={{ __html: text }}
          ></div>
          {treeViewHideCounter ? null : <span>{" (" + count + ")"}</span>}
        </span>
        {
          item.folderURL ?
            <a rel="noopener noreferrer" href={item.folderURL} target="_blank"><i
              title={"Visit Website"}
              className={"mdi mdi-link"}
              style={{ float :"right", fontSize: "16px", cursor: "pointer" }}
            ></i> </a>
            : null
          
        }
      </div>
    );
  }
}

export default connect(
  "doTreeUpdate",
  "doTreeSetCollapsed",
  "doLayerSetVisible",
  "selectTreeViewHideCounter",
  "selectTreeViewShowSelectAll",
  TreeListItemFolder
);
