traque/traque-front/components/admin/maps.jsx

"use client";
import { useLocation } from "@/hook/useLocation";
import { use, useEffect, useState } from "react";
import "leaflet/dist/leaflet.css";
import L from "leaflet";
import { Circle, LayerGroup, LayersControl, MapContainer, Marker, Popup, TileLayer, useMap } from "react-leaflet";
import { useMapCircleDraw, useTilesColor } from "@/hook/mapDrawing";
import useAdmin from "@/hook/useAdmin";
import { MapGridZoneSelector } from "./mapZoneSelector.jsx";
import { useAdminContext } from "@/context/adminContext.jsx";
import { GreenButton } from "../util/button.jsx";
import TextInput from "../util/textInput.jsx";


function MapPan(props) {
    const map = useMap();
    const [initialized, setInitialized] = useState(false);

    useEffect(() => {
        if (!initialized && props.center) {
            map.flyTo(props.center, props.zoom, { animate: false });
            setInitialized(true)
        }
    }, [props.center]);
    return null;
}

function MapEventListener({ onClick, onMouseMove }) {
    const map = useMap();
    useEffect(() => {
        map.on('click', onClick);
        return () => {
            map.off('click', onClick);
        }
    }, [onClick]);
    useEffect(() => {
        map.on('mousemove', onMouseMove);
        return () => {
            map.off('mousemove', onMouseMove);
        }
    });
    return null;
}

const DEFAULT_ZOOM = 13;
export function CircularAreaPicker({ area, setArea, markerPosition, ...props }) {
    const location = useLocation(Infinity);
    const { handleClick, handleMouseMove, center, radius } = useMapCircleDraw(area, setArea);
    return (
        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            {center && radius && <Circle center={center} radius={radius} fillColor="blue" />}
            {markerPosition && <Marker position={markerPosition} icon={new L.Icon({
                iconUrl: '/icons/location.png',
                iconSize: [41, 41],
                iconAnchor: [12, 41],
                popupAnchor: [1, -34],
                shadowSize: [41, 41]
            })}></Marker>}
            <MapPan center={location} zoom={DEFAULT_ZOOM} />
            <MapEventListener onClick={handleClick} onMouseMove={handleMouseMove} />
        </MapContainer>)
}

//https://stackoverflow.com/questions/71231865/show-fixed-100-m-x-100-m-grid-on-lowest-zoom-level

export function ZoneInitializer({ ...props }) {
    const location = useLocation(Infinity);
    const { zone } = useAdminContext();
    const { initZone } = useAdmin();

    const tilesColor = useTilesColor(zone);

    const handleClickTile = (tile) => {
        if (zone) {
            if (zone.some(t => t.x === tile.x && t.y === tile.y)) {
                initZone(zone.filter(t => t.x !== tile.x || t.y !== tile.y));
            } else {
                initZone([...zone, tile]);
            }
        }
    }

    return (
        <MapContainer  {...props} className='min-h-full w-full ' center={[0, 0]} zoom={0} scrollWheelZoom={true}>
            <TileLayer
                attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
            />
            <MapPan center={location} zoom={DEFAULT_ZOOM} />
            <LayersControl>
                <LayersControl.Overlay name="Play area" checked={true}>
                    <LayerGroup>
                        <MapGridZoneSelector tilesColor={tilesColor} onClickTile={handleClickTile} tileSize={16} />
                    </LayerGroup>
                </LayersControl.Overlay>
            </LayersControl>
        </MapContainer>
    )
}

export function ZoneEditor() {
    const location = useLocation(Infinity);
    const { zone, teams, getTeamName, removeZone } = useAdmin();
    const [zonesToDelete, setZonesToDelete] = useState([]);
    const [tilesColor, setTilesColor] = useState([]);
    const [timeBeforeDeletion, setTimeBeforeDeletion] = useState(0);

    function handleClickTile(tile) {
        if (!zone.some(t => t.x === tile.x && t.y === tile.y)) return;
        console.log(tile, "click", zonesToDelete);
        if (!zonesToDelete.some(t => t.x === tile.x && t.y === tile.y)) {
            setZonesToDelete([...zonesToDelete, tile]);
            console.log("delete", tile);
        } else {
            setZonesToDelete(zonesToDelete.filter(t => t.x !== tile.x || t.y !== tile.y));
        }
    }

    useEffect(() => {
        console.log(zone);
        setTilesColor([
            ...zonesToDelete.map(t => ({ x: t.x, y: t.y, color: 'rgba(255, 0, 0, 0.5)' })),
            ...zone
                .filter(t => !zonesToDelete.some(t2 => t.x == t2.x && t.y == t2.y))
                .map(t => {
                    if (t.removeDate == null) {
                        return { x: t.x, y: t.y, color: 'rgba(0, 0, 255, 0.5)' }
                    } else {
                        return { x: t.x, y: t.y, color: 'rgba(255, 255, 0, 0.5)' }
                    }
                }),
        ]);
    }, [zone, zonesToDelete]);

    const handleSubmit = (e) => {
        e.preventDefault();
        removeZone(zonesToDelete, timeBeforeDeletion);
        setZonesToDelete([]);
        setTimeBeforeDeletion(0);
    }


    return (
        <div className="flex flex-col w-full">
            <MapContainer className='min-h-full w-full ' center={location} zoom={DEFAULT_ZOOM} scrollWheelZoom={true}>
                <TileLayer
                    attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
                    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                />
                <MapPan center={location} zoom={DEFAULT_ZOOM} />
                {teams.map((team) => team.currentLocation && !team.captured && <Marker key={team.id} position={team.currentLocation} icon={new L.Icon({
                    iconUrl: '/icons/location.png',
                    iconSize: [41, 41],
                    iconAnchor: [12, 41],
                    popupAnchor: [1, -34],
                    shadowSize: [41, 41]
                })}>
                    <Popup>
                        <strong className="text-lg">{team.name}</strong>
                        <p className="text-md">Chasing : {getTeamName(team.chasing)}</p>
                        <p className="text-md">Chased by : {getTeamName(team.chased)}</p>
                    </Popup>
                </Marker>)}
                <LayersControl>
                    <LayersControl.Overlay name="Play area" checked={true}>
                        <LayerGroup>
                            <MapGridZoneSelector tilesColor={tilesColor} onClickTile={handleClickTile} tileSize={16} />
                        </LayerGroup>
                    </LayersControl.Overlay>
                </LayersControl>
            </MapContainer>
            <TextInput placeholder="Time before deletion" value={timeBeforeDeletion} onChange={(e) => setTimeBeforeDeletion(Number(e.target.value))}></TextInput>
            <GreenButton onClick={handleSubmit}>Delete selected zones</GreenButton>
        </div>
    )
}