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


class BasemapItem extends React.Component {
  handleClick = () => {
    const { idx, doChangeBasemap } = this.props;
    doChangeBasemap(idx);
  }

  render() {
    const { active, basemap, basemapImages, theme } = this.props;
    let tileurl = basemap.url.replace(/{[a-z]-[a-z]}/gi, "a");
    tileurl = tileurl.replace("{z}", "12");
    tileurl = tileurl.replace("{x}", "1206");
    tileurl = tileurl.replace("{y}", "1539");

    let id = basemapImages.find(imageID => imageID === basemap.id);
    let src = id ? basemap.altImage : tileurl;

    const itemClass = classnames({
      "cm-list-group-item": true,
      "pointer": true,
      [theme]: active
    })

    return (
      <li onClick={this.handleClick} className={itemClass} title={basemap.name}>
        <div className="overflow-ellipsis">
          <img src={src} width="40" height="40" alt={`Basemap tile for ${basemap.name}`} />
          <span style={{marginLeft:'10px'}}>{basemap.name}</span>
        </div>
      </li>
    );

  }
}

export default connect(
  'selectTheme',
  'doChangeBasemap',
  'selectBasemapImages',
  BasemapItem
);
