frontend/src/core/components/MapInfoTwoMarker.jsx

import React, { useEffect, useRef, useState } from "react";
import { Marker, useMapEvents } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import { Alert, Box, Button, Stack, Typography, Zoom } from "@mui/material";
import dynamic from "next/dynamic";
import MapLoading from "@/core/components/MapLayer/Loading";
import EndIcon from "@/assets/images/examine_marker_active.png";
import StartIcon from "@/assets/images/examine_marker.png";

const MapLayer = dynamic(() => import("@/core/components/MapLayer"), {
    loading: () => <MapLoading />,
    ssr: false,
});
const createCustomIcon = (size, iconUrl, labelText, color) => {
    if (labelText) {
        return L.divIcon({
            className: "custom-marker", // Apply your custom CSS class
            html: `
                  <div style="position: relative; text-align: center; width: 50px;">
                    <div style="background-color: ${color}; color: white; border-radius: 20px; padding: 5px;">
                      <span style="font-family: 'IRANSansFaNum', sans-serif;">${labelText}</span>
                    </div>
                    <div style="width: 5px; height: 20px; background: ${color}; margin: auto;border-bottom-left-radius: 50%; border-bottom-right-radius: 50%;"></div>
                  </div>`,
            iconSize: [50, 50],
            iconAnchor: [25, 50],
        });
    }
    return L.icon({
        iconUrl: iconUrl,
        iconSize: size,
        iconAnchor: [size[0] / 2, size[1]],
        popupAnchor: [0, -size[1]],
    });
};
const MAX_ZOOM_FOR_MARKER = 13;

const MapInteraction = ({ setValue, startLat, startLng, endLat, endLng }) => {
    const [isStartLocked, setIsStartLocked] = useState(!!(startLat && startLng));
    const [isEndLocked, setIsEndLocked] = useState(!!(endLat && endLng));
    const [startPosition, setStartPosition] = useState(startLat && startLng ? { lat: startLat, lng: startLng } : null);
    const [endPosition, setEndPosition] = useState(endLat && endLng ? { lat: endLat, lng: endLng } : null);
    const [enableSend, setEnableSend] = useState(false);
    const [startIconColor, setStartIconColor] = useState(startLat ? "#1CAC66" : "#003d4f");
    const [endIconColor, setEndIconColor] = useState(endLat ? "#D13131" : "#003d4f");
    const startRef = useRef();
    const endRef = useRef();

    const map = useMapEvents({
        move(e) {
            setEnableSend(e.target.getZoom() > MAX_ZOOM_FOR_MARKER);
            if (!isStartLocked && startRef.current) {
                startRef.current.setLatLng(e.target.getCenter());
            } else if (isStartLocked && !isEndLocked && endRef.current) {
                endRef.current.setLatLng(e.target.getCenter());
            }
        },
        zoom(e) {
            setEnableSend(e.target.getZoom() > MAX_ZOOM_FOR_MARKER);
            if (!isStartLocked && startRef.current) {
                startRef.current.setLatLng(e.target.getCenter());
            } else if (isStartLocked && !isEndLocked && endRef.current) {
                endRef.current.setLatLng(e.target.getCenter());
            }
        },
    });

    useEffect(() => {
        if (startLat && endLng) {
            map.fitBounds(
                [
                    { lat: startLat, lng: startLng },
                    { lat: endLat, lng: endLng },
                ],
                { paddingTopLeft: [64, 64], paddingBottomRight: [64, 64] }
            );
        }
    }, [startLat, map, endLng]);

    const handleUnlockStart = () => {
        setIsStartLocked(false);
        setStartPosition(null);
        setValue("start_point", null);
        setStartIconColor("#003d4f");
    };

    const handleUnlockEnd = () => {
        setIsEndLocked(false);
        setIsStartLocked(false);
        setEndPosition(null);
        setStartPosition(null);
        setValue("end_point", "");
        setValue("start_point", null);
        setStartIconColor("#003d4f");
        setEndIconColor("#003d4f");
    };

    return (
        <>
            <Marker
                position={startPosition || map.getCenter()}
                ref={startRef}
                icon={createCustomIcon([35, 35], StartIcon.src, "شروع", startIconColor)}
                eventHandlers={{
                    click: () => {
                        if (!enableSend) return;
                        if (!isStartLocked) {
                            const center = map.getCenter();
                            setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
                            setStartPosition({ lat: center.lat, lng: center.lng });
                            setIsStartLocked(true);
                            setStartIconColor("#1CAC66");
                            map.panBy([25, 25]);
                        }
                    },
                }}
            />
            <Stack
                direction={"row"}
                justifyContent={"center"}
                sx={{
                    zIndex: "400",
                    width: "100%",
                    position: "absolute",
                    top: 0,
                    left: 0,
                }}
            >
                <Zoom in={!enableSend}>
                    <Alert sx={{ mt: 1, py: 0.5, px: 2, borderRadius: 2, border: 1 }} icon={false} color={"warning"}>
                        برای ثبت محل فعالیت، لطفاً نقشه را بیشتر زوم کنید.
                    </Alert>
                </Zoom>
            </Stack>
            {isStartLocked && !isEndLocked && (
                <Box
                    sx={{
                        position: "absolute",
                        bottom: 10,
                        left: 10,
                        zIndex: 1000,
                    }}
                >
                    <Button variant={"contained"} color="warning" onClick={handleUnlockStart}>
                        ویرایش نقطه شروع
                    </Button>
                </Box>
            )}
            {isStartLocked && (
                <>
                    <Stack
                        direction={"row"}
                        justifyContent={"center"}
                        sx={{
                            zIndex: "400",
                            width: "100%",
                            position: "absolute",
                            top: 0,
                            left: 0,
                        }}
                    >
                        <Zoom in={!enableSend}>
                            <Alert
                                sx={{ mt: 1, py: 0.5, px: 2, borderRadius: 2, border: 1 }}
                                icon={false}
                                color={"warning"}
                            >
                                برای ثبت محل فعالیت، لطفاً نقشه را بیشتر زوم کنید.
                            </Alert>
                        </Zoom>
                    </Stack>
                    <Marker
                        position={endPosition || map.getCenter()}
                        ref={endRef}
                        icon={createCustomIcon([35, 35], EndIcon.src, "پایان", endIconColor)}
                        eventHandlers={{
                            click: () => {
                                if (!enableSend) return;
                                if (!isEndLocked) {
                                    const center = map.getCenter();
                                    setValue("end_point", { lat: center.lat.toString(), lng: center.lng.toString() });
                                    setEndPosition({ lat: center.lat, lng: center.lng });
                                    setIsEndLocked(true);
                                    setEndIconColor("#D13131");
                                    map.fitBounds([startPosition, map.getCenter()], {
                                        paddingTopLeft: [64, 64],
                                        paddingBottomRight: [64, 64],
                                    });
                                }
                            },
                        }}
                    />
                </>
            )}
            {isEndLocked && (
                <Box
                    sx={{
                        position: "absolute",
                        bottom: 10,
                        left: 10,
                        zIndex: 1000,
                    }}
                >
                    <Button variant={"contained"} color="warning" onClick={handleUnlockEnd}>
                        ویرایش نقاط
                    </Button>
                </Box>
            )}
        </>
    );
};

const MapInfoTwoMarker = ({ setValue, errors, StartPoint = null, EndPoint = null }) => {
    return (
        <Box>
            <Box sx={{ width: "100%", height: "400px", marginBottom: "16px" }}>
                <MapLayer style={{ border: "1px solid #0009", borderRadius: "4px" }}>
                    <MapInteraction
                        setValue={setValue}
                        startLat={StartPoint ? StartPoint.lat : null}
                        startLng={StartPoint ? StartPoint.lng : null}
                        endLat={EndPoint ? EndPoint.lat : null}
                        endLng={EndPoint ? EndPoint.lng : null}
                    />
                </MapLayer>
            </Box>
            <Box display="flex" gap={2}>
                {errors.start_point && (
                    <Typography color="error" variant="body2">
                        {errors.start_point.message}
                    </Typography>
                )}
                {errors.end_point && (
                    <Typography color="error" variant="body2">
                        {errors.end_point.message}
                    </Typography>
                )}
            </Box>
        </Box>
    );
};
export default MapInfoTwoMarker;