aswi2022code-of-duty-gitlab/frontend/src/features/TrackingTool/Import/MapPointToggleables.tsx @ 26f9c9ff

import { Checkbox, FormControlLabel, Stack, Typography } from '@mui/material'
import { useEffect, useState } from 'react'
import { useDispatch, useSelector } from 'react-redux'
import { RootState } from '../../redux/store'
import { updatePrimaryPath } from '../trackingToolSlice'
import { MapPointType, PathVariant } from '../trackingToolUtils'

const MapPointToggleables = () => {
    const dispatch = useDispatch()
    const paths = useSelector(
        (state: RootState) => state.trackingTool.pathVariants
    )
    const [path, setPath] = useState<PathVariant>([])
    const primaryPathIdx = useSelector(
        (state: RootState) => state.trackingTool.primaryPathIdx
    )
    useEffect(() => {
        setPath(
            paths && paths.length > primaryPathIdx ? paths[primaryPathIdx] : []
        )
    }, [paths, primaryPathIdx])

    const [enableMap, setEnableMap] = useState({
        [MapPointType.LocalCatalog]: true,
        [MapPointType.FromCoordinates]: true,
        [MapPointType.GeoJson]: true,
        [MapPointType.ExternalCatalog]: true,
    })

    // Disables specific feature
    const toggleFeature = (feature: MapPointType) => {
        setEnableMap({ ...enableMap, [feature]: !enableMap[feature] })
        const newPath = path.map((point) => {
            if (point.type === feature) {
                return {
                    ...point,
                    hidden: enableMap[point.type],
                    addToPath: !enableMap[point.type] ? true : point.addToPath,
                }
            }

            return point
        })
        dispatch(updatePrimaryPath(newPath))
    }

    return (
        <Stack direction="column">
            <Stack direction="row" justifyItems="space-between">
                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
                    From file
                </Typography>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={enableMap[MapPointType.GeoJson]}
                            onChange={() => toggleFeature(MapPointType.GeoJson)}
                        />
                    }
                    label="Show All"
                />
            </Stack>
            <Stack direction="row" justifyItems="space-between">
                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
                    From local catalog
                </Typography>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={enableMap[MapPointType.LocalCatalog]}
                            onChange={() =>
                                toggleFeature(MapPointType.LocalCatalog)
                            }
                        />
                    }
                    label="Show All"
                />
            </Stack>
            <Stack direction="row" justifyItems="space-between">
                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
                    From coordinates
                </Typography>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={enableMap[MapPointType.FromCoordinates]}
                            onChange={() =>
                                toggleFeature(MapPointType.FromCoordinates)
                            }
                        />
                    }
                    label="Show All"
                />
            </Stack>
            <Stack direction="row" justifyItems="space-between">
                <Typography align="left" variant="h6" sx={{ mr: 1 }}>
                    From external catalog
                </Typography>
                <FormControlLabel
                    control={
                        <Checkbox
                            checked={enableMap[MapPointType.ExternalCatalog]}
                            onChange={() =>
                                toggleFeature(MapPointType.ExternalCatalog)
                            }
                        />
                    }
                    label="Show All"
                />
            </Stack>
        </Stack>
    )
}

export default MapPointToggleables