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

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

  toggleFavorites(e) {
    e.preventDefault();
    e.stopPropagation();
    this.props.doToggleFavoritesView();
  }
  render() {
    const iconStyle = this.props.treeViewToggleFavoritesView
      ? "mdi mdi-star"
      : "mdi mdi-star-outline";

    const titleTxt = this.props.treeViewToggleFavoritesView
      ? "Hide Favorite Layers"
      : "Show Favorite Layers";
    
    return (
      <button
        className="cm-btn cm-btn-default cm-btn-xs"
        style={{ margin: "0 5px" }}
        title={titleTxt}
        onClick={this.toggleFavorites}
      >
        <i className={iconStyle} />
      </button>
    );
  }
}
export default connect(
  "doToggleFavoritesView",
  "selectTreeViewToggleFavoritesView",
  Favorites
);
