import { ActionIcon, useMantineColorScheme } from '@mantine/core'
import { IconArrowBackUp, IconArrowsMove, IconCircle, IconExclamationCircle, IconLine, IconPoint, IconPolygon, IconRuler, IconTransformPoint } from '@tabler/icons-react'
import { setCurrentTool, useMapStore } from '../../../store/map';

interface IToolbarProps {
    onSave: () => void;
    onRemove: () => void;
}

const MapToolbar = ({
    onSave,
    onRemove,
}: IToolbarProps) => {
    const mapState = useMapStore()
    const { colorScheme } = useMantineColorScheme();

    return (
        <ActionIcon.Group orientation='vertical' pos='absolute' top='8px' right='8px' style={{ zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
            <ActionIcon size='lg' variant='transparent' onClick={onSave}>
                <IconExclamationCircle />
            </ActionIcon>

            <ActionIcon size='lg' variant='transparent' onClick={onRemove}>
                <IconArrowBackUp />
            </ActionIcon>

            <ActionIcon
                size='lg'
                variant={mapState.currentTool === 'Edit' ? 'filled' : 'transparent'}
                onClick={() => {
                    setCurrentTool('Edit')
                }}>
                <IconTransformPoint />
            </ActionIcon>

            <ActionIcon
                size='lg'
                variant={mapState.currentTool === 'Point' ? 'filled' : 'transparent'}
                onClick={() => {
                    setCurrentTool('Point')
                }}>
                <IconPoint />
            </ActionIcon>

            <ActionIcon
                size='lg'
                variant={mapState.currentTool === 'LineString' ? 'filled' : 'transparent'}
                onClick={() => {
                    setCurrentTool('LineString')
                }}>
                <IconLine />
            </ActionIcon>

            <ActionIcon
                size='lg'
                variant={mapState.currentTool === 'Polygon' ? 'filled' : 'transparent'}
                onClick={() => {
                    setCurrentTool('Polygon')
                }}>
                <IconPolygon />
            </ActionIcon>

            <ActionIcon
                size='lg'
                variant={mapState.currentTool === 'Circle' ? 'filled' : 'transparent'}
                onClick={() => {
                    setCurrentTool('Circle')
                }}>
                <IconCircle />
            </ActionIcon>

            <ActionIcon
                size='lg'
                variant={mapState.currentTool === 'Mover' ? 'filled' : 'transparent'}
                onClick={() => {
                    setCurrentTool('Mover')
                }}
            >
                <IconArrowsMove />
            </ActionIcon>

            <ActionIcon
                size='lg'
                variant={mapState.currentTool === 'Measure' ? 'filled' : 'transparent'}
                onClick={() => {
                    setCurrentTool('Measure')
                }}>
                <IconRuler />
            </ActionIcon>
        </ActionIcon.Group>
    )
}

export default MapToolbar