import React from "react";
import { connect } from "redux-bundler-react";
import classnames from "classnames";
import OpacitySlider from "./opacity-slider";
import RemoveLayer from "./remove-layer";
import DownloadLayer from "./download-layer";
import FavoritesToggle from "./favorites-toggle";
import DefaultsToggle from "./defaults-toggle";

const LayerSubpanel = (props) => {
  const {
    treeViewSelectedItem,
    doRenderTreeView,
    primaryPanelShowClose,
    mapZoom,
    treeViewDownloadEnabled,
    primaryPanelShowFavoritesBtn,
    primaryPanelShowUserDefaultLayersBtn,
    treeRootNode,
    sortOrderStatus
  } = props;
  
  const listClass = classnames({
    "sidebar-list": !primaryPanelShowClose,
    "thin-scrollbar": true,
    "sidebar-list-show-close-btn": primaryPanelShowClose,
  });
  const listTop = primaryPanelShowClose ? 70 : 30;
  const showDownload =
    treeViewDownloadEnabled && treeViewSelectedItem.identifyType === "MAP"
      ? true
      : false;
  const url =
    treeViewSelectedItem.identifyType == "MAP"
      ? `${treeViewSelectedItem.url}?&service=WMS&version=1.3.0&request=GetCapabilities&layers=${treeViewSelectedItem.layerList}&query_layers=${treeViewSelectedItem.layerList}`
      : treeViewSelectedItem.url;

  return (
    <div>
      <div>
        <span
          onClick={doRenderTreeView}
          title="Go back"
          style={{
            fontSize: 24,
            cursor: "pointer",
          }}
        >
          <i className="mdi mdi-arrow-left"></i>
        </span>
      </div>
      <div className={listClass} style={{ top: listTop }}>
        <p>
          {treeViewSelectedItem.favorite ? (
            <i className="mdi mdi-star" title="Layer saved to favorites list" />
          ) : null}
          {treeViewSelectedItem.userDefaultLayer ? (
            <i
              className="mdi mdi-account"
              title="Layer saved to user default layer list"
            />
          ) : null}
          <b>{treeViewSelectedItem.displayName}</b>
        </p>
        <p>
          {" "}
          <a
            rel="noopener noreferrer"
            title={`Source for ${treeViewSelectedItem.displayName}`}
            href={url}
            target="_blank"
          >
            Source{" "}
          </a>
        </p>
        
        {treeViewSelectedItem.moreInfo ? (
            <p>
              {" "}
              <a
                rel="noopener noreferrer"
                title={`Source for ${treeViewSelectedItem.displayName}`}
                href={treeViewSelectedItem.moreInfo}
                target="_blank"
              >
                More Info{" "}
              </a>
          </p>
          ) : null}

        <p>
          <b>Layer(s):</b> {treeViewSelectedItem.layerList}{" "}
        </p>
        <p>
          <b>Service Type:</b> {treeViewSelectedItem.type}{" "}
        </p>
        <p>
          <b>Identify Type:</b> {treeViewSelectedItem.identifyType}{" "}
        </p>
        <div>
          {sortOrderStatus ? 
          <p>
            <b>Sort Order:</b> {treeViewSelectedItem.sortOrder}{" "}
          </p>
          : null}
        </div>
        <p>
          <b>Min Zoom:</b> {treeViewSelectedItem.minzoom}{" "}
        </p>
        <p>
          <b>Max Zoom:</b> {treeViewSelectedItem.maxzoom}{" "}
        </p>
        <p>
          <b>Current Zoom:</b> {Math.floor(mapZoom)}{" "}
        </p>
        
        
        {treeViewSelectedItem.attributions ? (
          <p>
            <b>Credits:</b> {treeViewSelectedItem.attributions}{" "}
          </p>
        ) : null}
        
        {treeViewSelectedItem.layerDescription ? (
          <p>
            <b>Layer Description:</b> {treeViewSelectedItem.layerDescription}{" "}
          </p>
        ) : null}

        {primaryPanelShowFavoritesBtn ? (
          <FavoritesToggle layer={treeViewSelectedItem} />
        ) : null}
        <p></p>
        {primaryPanelShowUserDefaultLayersBtn ? (
          <DefaultsToggle layer={treeViewSelectedItem} />
        ) : null}

        {showDownload ? <DownloadLayer /> : null}

        <OpacitySlider layer={treeViewSelectedItem.mapLayer} />

        <RemoveLayer layer={treeViewSelectedItem} />
      </div>
    </div>
  );
};

export default connect(
  "selectSortOrderStatus",
  "selectTreeViewSelectedItem",
  "selectPrimaryPanelShowClose",
  "selectMapZoom",
  "selectTreeViewDownloadEnabled",
  "selectPrimaryPanelShowFavoritesBtn",
  "selectPrimaryPanelShowUserDefaultLayersBtn",
  "selectTreeRootNode",
  "doRenderTreeView",
  LayerSubpanel
);
