import React, { useState, useEffect } from "react";

export default ({ item }) => {
  const [visible, setVisible] = useState(item.mapLayer.getVisible());

  useEffect(() => {
    if (!item.mapLayer) return undefined;
    item.mapLayer.setVisible(visible);
  }, [visible]);

  if (item.show === false) return null;

  return (
    <div
      style={{ listDecoration: "none", width: "100%", whiteSpace: "nowrap" }}
    >
      <span className="float-right" style={{ zIndex: 999 }}>
        <span
          onClick={() => {
            console.log("open details");
          }}
          className="pointer"
        >
          <i className="mdi mdi-more text-muted" title="More Info" />
        </span>
      </span>
      <label
        style={{
          display: "inline-block",
          width: "100%",
          overflow: "hidden",
          textOverflow: "ellipsis",
          whiteSpace: "nowrap",
          marginRight: "15px",
          zIndex: 99,
        }}
        className="cm-checkbox-inline cm-checkbox-ellipsis"
        title={item.displayName}
      >
        <input
          className="mr-2"
          type="checkbox"
          checked={visible}
          onChange={(e) => {
            setVisible(!visible);
          }}
        />
        {item.displayName}
      </label>
      {item.info ? (
        <span
          onClick={() => {}}
          title="More Information"
          style={{ paddingLeft: "4px", cursor: "pointer" }}
        >
          <i className="mdi mdi-alert-circle-outline"></i>
        </span>
      ) : null}
    </div>
  );
};
