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

class Defaults extends React.Component {
  constructor(props) {
    super(props);
    this.toggleUserDefaultLayers = this.toggleUserDefaultLayers.bind(this);
  }  

  toggleUserDefaultLayers(e) {
    e.preventDefault();
    e.stopPropagation();
    this.props.doToggleUserDefaultLayersView();
  }
  render() {
    const iconStyle = this.props.treeViewToggleUserDefaultLayersView
      ? "mdi mdi-account"
      : "mdi mdi-account-outline";

    const titleTxt = this.props.treeViewToggleUserDefaultLayersView
      ? "Hide Default Layers"
      : "Show Default Layers";
    
    return (
      <button
        className="cm-btn cm-btn-default cm-btn-xs"
        style={{ margin: "0 5px" }}
        title={titleTxt}
        onClick={this.toggleUserDefaultLayers}
      >
        <i className={iconStyle} />
      </button>
    );
  }
}
export default connect(
  "doToggleUserDefaultLayersView",
  "selectTreeViewToggleUserDefaultLayersView",
  Defaults
);
