import React from "react";
import { connect } from "redux-bundler-react";
import BasemapItem from "./basemap-switcher-list-item";
import classnames from "classnames";

class BasemapList extends React.Component {
  render() {
    const { activeBasemapIdx, basemapList, primaryPanelShowClose } = this.props;

    const listClass = classnames({
      "cm-list-group": true,
      "sidebar-list": !primaryPanelShowClose,
      "thin-scrollbar": true,
      "sidebar-list-show-close-btn": primaryPanelShowClose,
    });

    return (
      <div className="">
        <ul className={listClass}>
          {basemapList.map((basemap, i) => {
            const active = activeBasemapIdx === i;
            return (
              <BasemapItem active={active} basemap={basemap} key={i} idx={i} />
            );
          })}
        </ul>
      </div>
    );
  }
}

export default connect(
  "selectActiveBasemapIdx",
  "selectBasemapList",
  "selectPrimaryPanelShowClose",
  BasemapList
);
