import { useEffect, useRef, useState } from "react";
import SearchPlusIcon from "../icons/SearchIcon";
import OpenFullscreenIcon from "../icons/OpenFullscreenIcon";
import LineIcon from "../icons/LineIcon";
import useModal from "../../store/useModal";

const ZoomHint = () => {
  const { setModal } = useModal();
  const [isTransparent, setIsTransparent] = useState(false);
  const ref = useRef(null);

  const handleOnScroll = () => {
    setIsTransparent(true);

    const timeOut = setTimeout(() => {
      setModal(null);
      clearTimeout(timeOut);
    }, 300);
  };

  const handleClick = () => {
    setIsTransparent(true);

    const timeOut = setTimeout(() => {
      setModal(null);
      clearTimeout(timeOut);
    }, 300);
  };

  useEffect(() => {
    window.addEventListener("click", handleClick);
    window.addEventListener("touchstart", handleClick);

    const map = document.querySelector(".react-transform-wrapper");
    if (!map) return;
    map.addEventListener("wheel", handleOnScroll);
    return () => {
      map.removeEventListener("wheel", handleOnScroll);
      window.removeEventListener("click", handleClick);
      window.removeEventListener("touchstart", handleClick);
    };
  }, []);

  return (
    <div
      className={`absolute z-10 m-auto top-[calc(50%-60px)] left-[calc(50%-140px)] flex flex-col items-center bg-[#0D192266] backdrop-blur-md p-4 text-white gap-3 rounded-lg transition-opacity duration-300 ${
        isTransparent ? "opacity-0" : "opacity-100"
      }`}
      ref={ref}
    >
      <div className="flex gap-4 items-center">
        <SearchPlusIcon />
        <LineIcon />
        <OpenFullscreenIcon />
      </div>
      <p>Zoom and Move to select a location</p>
    </div>
  );
};

export default ZoomHint;
