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

class IdentifyDetails extends React.Component {
  componentDidMount() {
    const { map, identifyDetailLayer } = this.props;
    map.addLayer(identifyDetailLayer);
  }

  componentWillUnmount() {
    const { map, identifyDetailLayer } = this.props;
    map.removeLayer(identifyDetailLayer);
  }

  render() {
    const {
      identifyDetailFeature,
      doRenderIdentifySidebar,
      primaryPanelShowClose,
    } = this.props;

    const listClass = classnames({
      "sidebar-list": !primaryPanelShowClose,
      "thin-scrollbar": true,
      "sidebar-list-show-close-btn": primaryPanelShowClose,
    });
    const listTop = primaryPanelShowClose ? 60 : 30;

    return (
      <div>
        <div>
          <span
            onClick={doRenderIdentifySidebar}
            style={{
              fontSize: 24,
              cursor: "pointer",
            }}
          >
            <i className="mdi mdi-arrow-left"></i>
          </span>
        </div>
        <div className={listClass} style={{ top: listTop }}>
          {Object.keys(identifyDetailFeature.properties).map((key, i) => {
            return (
              <p key={btoa(key) + i}>
                <span className="col-sm-4 overflow-ellipsis" title={key}>
                  {key}
                </span>
                <span className="col-sm-8">
                  {identifyDetailFeature.properties[key]}
                </span>
              </p>
            );
          })}
        </div>
      </div>
    );
  }
}

export default connect(
  "selectIdentifyDetailFeature",
  "selectIdentifyDetailLayer",
  "selectMap",
  "doRenderIdentifySidebar",
  "selectPrimaryPanelShowClose",
  IdentifyDetails
);
