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

class IdentifyDetails extends React.Component {
  constructor(props) {
    super(props);
    this.renderValue = this.renderValue.bind(this);
  }

  componentDidMount() {
    const { map, identifyDetailLayer } = this.props;
    map.addLayer(identifyDetailLayer);
  }

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

  renderValue(val) {
    if (val && typeof val === "string") {
      if (isHtml(val)) {
        return (
          <td
            className="col-sm-8 overflow-sidebar-identify"
            dangerouslySetInnerHTML={{ __html: val }}
          ></td>
        );
      } else {
        if (val.indexOf("http") !== -1) {
          return (
            <td className="col-sm-8 overflow-sidebar-identify" title={val}>
              <a href={val}>{val}</a>
            </td>
          );
        } else {
          return (
            <td className="col-sm-8 overflow-sidebar-identify" title={val}>
              {val}
            </td>
          );
        }
      }
    } else {
      return (
        <td className="col-sm-8 overflow-sidebar-identify" title={val}>
          {val}
        </td>
      );
    }
  }

  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>
        <i
          onClick={doRenderIdentifySidebar}
          style={{
            fontSize: 24,
            cursor: "pointer",
          }}
          title="Return to List"
          className="mdi mdi-arrow-left"
        ></i>
        <div className={listClass} style={{ top: listTop }}>
          <table className="table table-striped table-hover ">
            <thead>
              <tr>
                <th className="col-sm-4 overflow-sidebar-identify">
                  <strong>Attribute</strong>
                </th>
                <th className="col-sm-8 overflow-sidebar-identify">
                  <strong>Value</strong>
                </th>
              </tr>
            </thead>
            <tbody>
              {Object.keys(identifyDetailFeature.properties).map((key, i) => {
                return (
                  <tr key={btoa(key) + i}>
                    <td className="col-sm-4 overflow-sidebar-identify" title={key}>
                      {key}
                    </td>
                    {this.renderValue(identifyDetailFeature.properties[key])}
                  </tr>
                );
              })}
            </tbody>
          </table>
        </div>
      </div>
    );
  }
}

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