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) => {
    if (labelText) {
        return L.divIcon({
            html: `
                <div style="position: relative; display: inline-block; text-align: center;">
                    <img 
                        src="${iconUrl}" 
                        style="width: ${size[0]}px; height: ${size[1]}px;" 
                        alt="icon"
                    />
                    <div style="position: absolute; top: 100%; left: 50%; transform: translate(-50%, 0); color: black; font-size: 12px;">
                        ${labelText}
                    </div>
                </div>
            `,
            iconSize: size,
            iconAnchor: [size[0] / 2, size[1]],
            popupAnchor: [0, -size[1]],
        });
    }

    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 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: [16, 16], paddingBottomRight: [16, 130] }
            );
        }
    }, [startLat, map, endLng]);

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

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

    return (
        <>
            <Marker
                position={startPosition || map.getCenter()}
                ref={startRef}
                icon={createCustomIcon([35, 35], StartIcon.src, "نقطه شروع")}
                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);
                        }
                    },
                }}
            />
            <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"} 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, "نقطه پایان")}
                        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);
                                }
                            },
                        }}
                    />
                </>
            )}
            {isEndLocked && (
                <Box
                    sx={{
                        position: "absolute",
                        bottom: 10,
                        left: 10,
                        zIndex: 1000,
                    }}
                >
                    <Button variant={"contained"} 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;