// /components/uiWidgets/mapLayersControlPanel/EditModeToggle.js
import React, { useState, useEffect } from "react";
import EditOffIcon from "@mui/icons-material/EditOff";
import ModeEditIcon from "@mui/icons-material/ModeEdit";
import Tooltip from "@mui/material/Tooltip"; // Importiere Tooltip von Material-UI
import { useSelector } from "react-redux";
import { selectGisUserRightsFromWebservice } from "@/redux/slices/webservice/userRightsSlice";
import BlockIcon from "@mui/icons-material/Block"; // 🚫 Symbol

function EditModeToggle() {
  const rights = useSelector(selectGisUserRightsFromWebservice);
  const hasEditRight = rights.some(r => r.IdRight === 56);
  const [isHovered, setIsHovered] = useState(false);

  const [editMode, setEditMode] = useState(() => localStorage.getItem("editMode") === "true");

  const toggleEditMode = () => {
    const newEditMode = !editMode;
    setEditMode(newEditMode);
    localStorage.setItem("editMode", newEditMode);
    //Browser neu laden, um die Änderungen anzuwenden
    window.location.reload();
  };

  useEffect(() => {
    const storedMode = localStorage.getItem("editMode") === "true";
    setEditMode(storedMode);
  }, []);

  return (
    <Tooltip
      title={
        hasEditRight
          ? editMode
            ? "Bearbeitungsmodus deaktivieren"
            : "Bearbeitungsmodus aktivieren"
          : "Keine Bearbeitungsrechte"
      }
      placement="top"
    >
      <div
        onClick={hasEditRight ? toggleEditMode : undefined}
        style={{
          cursor: hasEditRight ? "pointer" : "default",
          display: "inline-block",
        }}
      >
        <div
          style={{
            opacity: hasEditRight ? 1 : 0.4,
            pointerEvents: hasEditRight ? "auto" : "none", // nur Icon blockieren
          }}
        >
          {editMode ? <EditOffIcon /> : <ModeEditIcon />}
        </div>
      </div>
    </Tooltip>
  );
}

export default EditModeToggle;