import React from "react";
import { connect } from "redux-bundler-react";
import classnames from "classnames";
import DatasetInfo from "./dataset-info-modal";
import DatasetLegend from "./dataset-legend";
import _ from "lodash";

class TreeListItemDataset extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      showLegend: false,
      visible: props.item.visible,
      displayName: props.item.displayName,
      type: props.item.type,
      expanded: false,
    };
    this.toggleVisible = this.toggleVisible.bind(this);
    this.zoomTo = this.zoomTo.bind(this);
    this.openMetadata = this.openMetadata.bind(this);
    this.renderInfoButton = this.renderInfoButton.bind(this);
  }

  toggleVisible() {
    const { item, doLayerSetVisible } = this.props;
    doLayerSetVisible(item.uid, !item.visible);
  }

  toggleExpanded = () => {
    const { doOpenLayerDetails, item } = this.props;
    doOpenLayerDetails(item);
  };

  zoomTo() {
    const { item, doZoomToLayerExtent } = this.props;
    doZoomToLayerExtent(item.uid);
  }

  openMetadata(inline) {
    const { doModalOpen, item } = this.props;
    // this is a hack for the requirements of this particular app
    if (!inline) {
      doModalOpen({
        children: [DatasetInfo],
        options: { item: item },
        openedBy: "LayerTree",
      });
    } else {
      this.setState({
        showLegend: !this.state.showLegend,
      });
    }
  }

  renderInfoButton() {
    const { item } = this.props;
    if (!item.info || _.isEmpty(item.info)) return null;
    return (
      <span
        onClick={this.openMetadata}
        title="More Information"
        style={{ paddingLeft: "4px", cursor: "pointer" }}
      >
        <i className="mdi mdi-alert-circle-outline"></i>
      </span>
    );
  }

  renderLegend() {
    // this is a hack for this app
    const { showLegend } = this.state;
    const { item } = this.props;
    if (!showLegend) return null;
    return <DatasetLegend item={item} />;
  }

  render() {
    const { item, isOver, theme, mapZoom } = this.props;
    const { expanded } = this.state;
    const { displayName, type, identifyType, favorite, userDefaultLayer } = item;

    if (!item.passFilter) return null;

    const enabled = item.minzoom <= mapZoom && item.maxzoom >= mapZoom;
    const itemTxtStyle = enabled ? { color: "#666" } : { color: "#bbb" };

    const itemClass = classnames({
      "cm-checkbox-inline": true,
      "cm-checkbox-ellipsis": true,
      "tree-list-item-hover": isOver,
    });
    const iconClass = classnames({
      mdi: true,
      "mdi-map-marker": type === "POINT",
      "mdi-vector-line": type === "LINE",
      "mdi-vector-polygon": type === "POLYGON",
      "mdi-grid": type === "RASTER",
      "mdi-google-maps": type === "SERVICE",
    });
    const expanderClass = classnames({
      [theme]: expanded,
      "layertree-layeritem-detailsicon": true,
      expanded: expanded,
    });
    return (
      <div className="layertree-layeritem">
        <span className="pull-right">
          <span onClick={this.toggleExpanded} className={expanderClass}>
            <i className="mdi mdi-dots-horizontal" title="More Info" />
          </span>
        </span>
        <label
          className={itemClass}
          title={`${displayName} ${!enabled ? "- zoom in to enable" : ""}`}
          style={itemTxtStyle}
        >
          <input
            disabled={!enabled}
            type="checkbox"
            checked={item.visible}
            value={item.visible}
            onChange={this.toggleVisible}
          />
          {identifyType ? (
            <sup
              style={{ fontSize: "10px" }}
              className="ms ms-information"
              title="Identify Tool Enabled for this Layer"
            ></sup>
          ) : null}
          {favorite ? (
            <i
              style={{ fontSize: "11px" }}
              className="mdi mdi-star"
              title="Layer saved to favorites list"
            />
          ) : null}
           {userDefaultLayer ? (
            <i
              style={{ fontSize: "11px" }}
              className="mdi mdi-account"
              title="Layer saved to user default layer list"
            />
          ) : null}
          {displayName}
        </label>
        {this.renderInfoButton()}
        {this.renderLegend()}
      </div>
    );
  }
}

export default connect(
  "selectTheme",
  "selectMapZoom",
  "doLayerSetVisible",
  "doTreeUpdate",
  "doZoomToLayerExtent",
  "doOpenLayerDetails",
  "doModalOpen",
  TreeListItemDataset
);
