aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Map/MapPath.tsx @ fc8a530f

import { Fragment, useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { MapPoint, isMapPointDisplayable } from '../trackingToolUtils'
import TextPath from 'react-leaflet-textpath'
import { updateMapMarker } from '../trackingToolSlice'
import MapMarker from './MapMarker'
import { LatLngTuple } from 'leaflet'
import { Popup, Tooltip } from 'react-leaflet'
import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
import { formatHtmlStringToReactDom } from '../../../utils/formatting/HtmlUtils'
import { DialogCatalogItemDetail as CatalogItemDetailDialog } from '../../Catalog/CatalogItemDetail'

type EdgeElement = any
const MapPath = () => {
    const dispatch = useDispatch()
    const path = useSelector(
        (state: RootState) => state.trackingTool.displayedPath
    )
    // Color of the path
    const pathColor = '#346eeb'

    // List of all active map points
    const [displayableMapPoints, setDisplayableMapPoints] = useState<
        MapPoint[]
    >([])
    useEffect(() => {
        if (!path) {
            setDisplayableMapPoints([])
            return
        }

        // Set all displayable vertices
        setDisplayableMapPoints(
            path.filter((mapPoint) => isMapPointDisplayable(mapPoint))
        )
    }, [path])

    // List of all edges in the path
    const [edges, setEdges] = useState<EdgeElement[]>([])
    useEffect(() => {
        // Get all active map points
        const activeMapPoints = displayableMapPoints.filter(
            (item) => item.addToPath && !item.hidden
        )
        if (activeMapPoints.length < 2) {
            setEdges([])
            return
        }

        // Build edges
        const edges = []
        for (let i = 0; i < activeMapPoints.length - 1; i += 1) {
            const [start, end] = [
                activeMapPoints[i].catalogItem,
                activeMapPoints[i + 1].catalogItem,
            ]
            edges.push(
                <TextPath
                    key={`${activeMapPoints[i].id}-${
                        activeMapPoints[i + 1].id
                    }`}
                    positions={[
                        [start.latitude, start.longitude],
                        [end.latitude, end.longitude],
                    ]}
                    text="►"
                    attributes={{
                        'font-size': 19,
                        fill: pathColor,
                    }}
                    repeat
                    center
                    weight={0}
                />
            )
        }
        setEdges(edges)
    }, [dispatch, displayableMapPoints])

    // List of vertices to display
    const [vertices, setVertices] = useState<JSX.Element[]>([])
    useEffect(() => {
        // Iterate over all displayable map points and map them to MapMarker
        setVertices(
            displayableMapPoints.map((item) => (
                <MapMarker
                    key={item.id}
                    position={[
                        item.catalogItem.latitude as number,
                        item.catalogItem.longitude as number,
                    ]}
                    mapPoint={item}
                    updatePositionCallbackFn={(position: LatLngTuple) => {
                        dispatch(
                            updateMapMarker({
                                ...item,
                                catalogItem: {
                                    ...item.catalogItem,
                                    latitude: position[0],
                                    longitude: position[1],
                                },
                            })
                        )
                    }}
                >
                    <Fragment>
                        <Tooltip>
                            {/* <Typography> */}
                            {item.catalogItem.name ?? ''}
                            {/* </Typography> */}
                        </Tooltip>
                        <Popup>
                            <Fragment>
                                <Stack direction="column" sx={{ m: 0 }}>
                                    <Typography
                                        variant="h6"
                                        fontWeight="bold"
                                        fontSize={16}
                                    >
                                        {formatHtmlStringToReactDom(
                                            item.catalogItem.name as string
                                        )}
                                    </Typography>
                                    <FormControlLabel
                                        control={
                                            <Checkbox
                                                checked={item.addToPath}
                                                onChange={() => {
                                                    dispatch(
                                                        updateMapMarker({
                                                            ...item,
                                                            addToPath:
                                                                !item.addToPath,
                                                        })
                                                    )
                                                }}
                                            />
                                        }
                                        labelPlacement="end"
                                        label="Active"
                                    />
                                    <CatalogItemDetailDialog
                                        itemId={item.catalogItem.id ?? ''}
                                    />
                                </Stack>
                            </Fragment>
                        </Popup>
                    </Fragment>
                </MapMarker>
            ))
        )
    }, [dispatch, displayableMapPoints])

    return (
        <Fragment>
            {vertices}
            {edges}
        </Fragment>
    )
}

export default MapPath