aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Import/ImportContextMenu.tsx @ c0b66eaf

import { LeafletMouseEvent } from 'leaflet'
import { Fragment, useCallback, useState } from 'react'
import { Popup, useMapEvents } from 'react-leaflet'
import Typography from '@mui/material/Typography'
import {  Stack } from '@mui/material'
import AddFromCoordinatesDialog from './AddFromCoordinatesDialog'
import { useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import ImportLocationDialog from './ImportLocationDialog'
import { PathDto } from '../../../swagger/data-contracts'

const RightClickPopupMenu = () => {
    const [open, setOpen] = useState(false)
    const [latLng, setLatLng] = useState<[number, number]>([0, 0])
    const pathDto = useSelector((state: RootState) => state.trackingTool.pathDto)

    useMapEvents({
        contextmenu: (e: LeafletMouseEvent) => {
            if (!pathDto) {
                return
            }
            setLatLng([e.latlng.lat, e.latlng.lng])
            setOpen(true)
        },
    })

    const closeContextMenu = useCallback(() => {
        setOpen(false)
    }, [setOpen])

    return (
        <Fragment>
            {open && (
                <Popup onClose={() => setOpen(false)} position={latLng}>
                    <Stack
                        sx={{ p: 0, mt: 0 }}
                        direction="column"
                        justifyItems="center"
                        justifyContent="center"
                    >
                        <Typography style={{margin: 0}} sx={{ mb: 0.5 }} align="center">
                            {latLng[0].toFixed(5)}°{latLng[1].toFixed(5)}°
                        </Typography>
                        <AddFromCoordinatesDialog
                            latLng={latLng}
                            closeContextMenu={closeContextMenu}
                        />
                        <ImportLocationDialog
                            latLng={latLng}
                            closeContextMenu={closeContextMenu}
                        />
                    </Stack>
                </Popup>
            )}
        </Fragment>
    )
}

export default RightClickPopupMenu