import { useMap } from "react-leaflet";

import gps from "./img/gps.svg";
import WindowWidthType from "../utils/windowWidthType";
import { useRef } from "@wordpress/element";
import useWindowSize from "../utils/resizeHook";

const KartografControls = (props) => {
  const map = useMap();
  const windowSize = useWindowSize();
  const userLocationMarker = useRef(null);
  const userLocationMarkerIcon = new L.DivIcon({
    className: "userLocationMarkerWrapper",
    html: `<img class="userLocationMarker" src=${gps} alt="location"/>`,
    iconSize: [24, 24],
    iconAnchor: [12, 12],
  });

  const setUserLocation = () => {
    if ("geolocation" in navigator) {
      /* geolocation is available */
      navigator.geolocation.getCurrentPosition((position) => {
        var latlng = {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
        };
        if (userLocationMarker.current) {
          userLocationMarker.current.setLatLng(latlng);
        } else {
          userLocationMarker.current = L.marker(latlng, {
            icon: userLocationMarkerIcon,
          }).addTo(map);
        }
        if (!!props.onSetUserLocation)
          props.onSetUserLocation(new L.LatLng(latlng.lat, latlng.lng));
        else map.setView(latlng, 15);
      });
    } else {
      window.alert("Geolokalizacja niedostepna");
      /* geolocation IS NOT available */
    }
  };

  if (windowSize >= WindowWidthType.MD) {
    return (
      <div className={"controls"}>
        <div className={"top"}>
          <div className={"background"}>
            <div
              onClick={() => {
                props.onMapClose();
              }}
              className={"controlButton"}
            >
              <i className={"controlIcon"}>&#10005;</i>
            </div>
          </div>
        </div>
        <div className={"bottom"}>
          <div className={"background"}>
            <div
              className={`controlButton`}
              onClick={() => {
                setUserLocation();
              }}
            >
              <img
                src={gps}
                // alt={props._t("location").toString()}
              />
            </div>
          </div>
          <div className={"background"}>
            <div className={"controlButton"} onClick={() => map.zoomIn()}>
              <i className={"controlIcon"}>&#43;</i>
            </div>
            <div className={"epaka-separator"}></div>
            <div className={"controlButton"} onClick={() => map.zoomOut()}>
              <i className={"controlIcon"}>&#8722;</i>
            </div>
          </div>
        </div>
      </div>
    );
  } else {
    return (
      <div className={"controls"}>
        <div className={"bottom"}>
          <div
            onClick={() => setUserLocation()}
            className={`locationMobile ${
              !!userLocationMarker.current && "bgBlue"
            }`}
          >
            <div className={"controlButton"}>
              <img src={gps} alt={"location"} />
            </div>
            <span>{"Moja lokalizacja"}</span>
          </div>
        </div>
      </div>
    );
  }
};

export default KartografControls;
