import React, { useEffect, useRef, useState } from "react";
import { Marker, useMapEvents } from "react-leaflet";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import { Box, Button, Typography } from "@mui/material";
import dynamic from "next/dynamic";
import MapLoading from "@/core/components/MapLayer/Loading";
import HereIcon from "@/assets/images/examine_marker_active.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 MapInteraction = ({ setValue, startLat, startLng }) => {
    const [isMarkerLocked, setIsMarkerLocked] = useState(!!(startLat && startLng)); // وضعیت قفل مارکر
    const [markerPosition, setMarkerPosition] = useState(
        startLat && startLng ? { lat: startLat, lng: startLng } : null
    );
    const markerRef = useRef();

    const map = useMapEvents({
        move(e) {
            if (!isMarkerLocked && markerRef.current) {
                markerRef.current.setLatLng(e.target.getCenter());
            }
        },
        zoom(e) {
            if (!isMarkerLocked && markerRef.current) {
                markerRef.current.setLatLng(e.target.getCenter());
            }
        },
    });

    useEffect(() => {
        if (startLat && startLng) {
            const position = { lat: startLat, lng: startLng };
            map.setView(position, 15);
        }
    }, [startLat, startLng, map]);

    const handleMarkerClick = () => {
        if (!isMarkerLocked) {
            const center = map.getCenter();
            setValue("start_point", { lat: center.lat.toString(), lng: center.lng.toString() });
            setMarkerPosition({ lat: center.lat, lng: center.lng }); // به‌روزرسانی موقعیت مارکر
            setIsMarkerLocked(true);
        }
    };

    const handleUnlockMarker = () => {
        setValue("start_point", null); // حذف مقدار قبلی
        setIsMarkerLocked(false); // باز کردن قفل مارکر
        setMarkerPosition(null); // تنظیم مارکر به مرکز نقشه
    };

    return (
        <>
            <Marker
                position={markerPosition || map.getCenter()} // استفاده از موقعیت
                ref={markerRef}
                icon={createCustomIcon([35, 35], HereIcon.src, "اینجا")}
                eventHandlers={{
                    click: handleMarkerClick,
                }}
            />
            {isMarkerLocked && (
                <Box
                    sx={{
                        position: "absolute",
                        bottom: 10,
                        left: 10,
                        zIndex: 1000,
                    }}
                >
                    <Button variant="contained" onClick={handleUnlockMarker}>
                        ویرایش
                    </Button>
                </Box>
            )}
        </>
    );
};

const MapInfoOneMarker = ({ setValue, errors, StartPoint = 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}
                    />
                </MapLayer>
            </Box>
            <Box display="flex" gap={2}>
                {errors.start_point && (
                    <Typography color="error" variant="body2">
                        {errors.start_point.message}
                    </Typography>
                )}
            </Box>
        </Box>
    );
};

export default MapInfoOneMarker;