import { Checkbox, Flex, NavLink, Stack } from '@mantine/core'
import Map from 'ol/Map'
import React from 'react'

interface MapLayersProps {
    map: React.MutableRefObject<Map | null>
}

const MapLayers = ({
    map
}: MapLayersProps) => {
    return (
        <Stack gap='0'>
            {map.current?.getLayers().getArray() && map.current?.getLayers().getArray().map((layer, index) => (
                <Flex key={`layer-${index}`} gap='xs' align='center'>
                    <Checkbox.Indicator
                        checked={layer.getLayerState().visible}
                        onClick={() => layer.getLayerState().visible ? layer.setVisible(false) : layer.setVisible(true)}
                    />
                    <NavLink p={0} label={layer.get('name')} onClick={() => { console.log(layer.getLayerState()) }} />
                </Flex>
            ))}
        </Stack>
    )
}

export default MapLayers