import React from "react";
import classnames from "classnames";

class TreeListFolder extends React.Component {
  render() {
    const { item, collapsed, toggleCollapsed } = this.props;

    const iconClass = classnames({
      mdi: true,
      "mdi-folder-open": !collapsed,
      "mdi-folder": collapsed,
    });
    const itemClass = classnames({
      "tree-list-item-hover": false,
    });

    const divStyle = {
      display: "inline-block",
      paddingLeft: "8px",
    };
    const count = item.children.length;
    return (
      <div>
        <i
          title="Click to collapse or expand"
          onClick={toggleCollapsed}
          className={iconClass}
          style={{ fontSize: "16px", cursor: "pointer" }}
        ></i>

        <span>
          <div
            className={itemClass}
            style={divStyle}
            onDoubleClick={toggleCollapsed}
          >
            {item.displayName}
          </div>
          <span>{" (" + count + ")"}</span>
        </span>
      </div>
    );
  }
}

export default TreeListFolder;
