import React from "react";
import { connect } from "redux-bundler-react";
import themes from "./themes";
import ThemeListItem from "./theme-list-item";
import classnames from "classnames";

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

    return (
      <div>
        <ul className={listClass}>
          {themes.map((theme, i) => {
            return <ThemeListItem theme={theme} key={i} />;
          })}
        </ul>
      </div>
    );
  }
}
export default connect("selectPrimaryPanelShowClose", ThemeList);
