import React from "react";
import { connect } from "redux-bundler-react";
import BookmarkListItem from "./bookmark-list-item";
import classnames from "classnames";

class BookmarkList extends React.Component {
  render() {
    const { bookmarks, primaryPanelShowClose } = this.props;
    const listClass = classnames({
      "cm-list-group": true,
      "sidebar-list": !primaryPanelShowClose,
      "thin-scrollbar": true,
      "sidebar-list-show-close-btn": primaryPanelShowClose,
    });
    const listTop = primaryPanelShowClose ? 50 : 30;

    return (
      <ul className={listClass} style={{ top: listTop }}>
        {bookmarks.map((bookmark, i) => {
          return <BookmarkListItem key={i} idx={i} bookmark={bookmark} />;
        })}
      </ul>
    );
  }
}

export default connect(
  "selectBookmarks",
  "selectPrimaryPanelShowClose",
  BookmarkList
);
