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

class MapLoadingIndicator extends React.Component {
  render() {
    const { mapLoading } = this.props;

    if (mapLoading) {
      return (
        <div className="cm-map-loading-container">
          <div className="cm-loading-indicator" title="Map Layers Loading" />
        </div>
      );
    } else {
      return (
        <div className="cm-map-loading-container">
          <div className="cm-map-ready">
            <i
              className="mdi mdi-check-bold"
              style={{ color: "#4BB543" }}
              title="Map Layers Loaded"
            />
          </div>
        </div>
      );
    }
  }
}

export default connect("selectMapLoading", MapLoadingIndicator);
