import React from "react";
import { connect } from "redux-bundler-react";
import treeViewPanel from "../tree-view/tree-view-panel";

class LegendHeader extends React.Component {
  constructor(props) {
    super(props);

    this.doViewLayerInTree = this.doViewLayerInTree.bind(this);
  }
  doViewLayerInTree() {
    this.props.doPrimaryPanelOpen({
      openedBy: "Legend",
      options: null,
      children: [treeViewPanel],
    });
  }
  render() {
    const { layer } = this.props;
    const headerContainer = {
      display: "flex",
      justifyContent: "space-between",
    };

    return (
      <div style={headerContainer}>
        <div className="overflow-ellipsis" title={layer.displayName}>
          <strong>{layer.displayName}</strong>
        </div>
        <button
          type="button"
          title="View Layer"
          style={{ marginLeft: "5px" }}
          className="cm-btn cm-btn-default cm-btn-xs"
          onClick={this.doViewLayerInTree}
        >
          <i className="mdi mdi-layers" />
        </button>
      </div>
    );
  }
}
export default connect("doPrimaryPanelOpen", LegendHeader);
