// /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

function EditModeToggle() {
  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 (
    <div onClick={toggleEditMode} style={{ cursor: "pointer" }}>
      {editMode ? (
        <Tooltip title="Bearbeitungsmodus deaktivieren" placement="top">
          <EditOffIcon />
        </Tooltip>
      ) : (
        <Tooltip title="Bearbeitungsmodus aktivieren" placement="top">
          <ModeEditIcon />
        </Tooltip>
      )}
    </div>
  );
}

export default EditModeToggle;