import { IconArrowBackUp, IconArrowForwardUp, IconArrowsMove, IconCircle, IconExclamationCircle, IconLine, IconPoint, IconPolygon } from '@tabler/icons-react'
import { getChanges, getCurrentChange, setCurrentChange, setCurrentTool, useMapStore } from '../../../store/map';
import { saveFeatures } from '../mapUtils';
import { Button, Tooltip } from '@fluentui/react-components';
import { useAppStore } from '../../../store/app';
import { useObjectsStore } from '../../../store/objects';
import { AddFilled, RulerRegular, SelectObjectRegular, SelectObjectSkewEditRegular, SubtractFilled } from '@fluentui/react-icons';

const MapToolbar = ({
    map_id
}: { map_id: string }) => {
    const { currentTool, mode, map, selectionDragBox } = useMapStore().id[map_id]
    const { selectedRegion, selectedDistrict, selectedYear } = useObjectsStore().id[map_id]
    const { colorScheme } = useAppStore();

    const getEntries = () => {
        const entries = Array.from(getChanges(map_id).entries())
        const currentIndex = entries.findIndex(([key]) => key === getCurrentChange(map_id))

        let prevEntry = undefined
        let currentEntry = undefined
        let nextEntry = undefined

        if (currentIndex !== -1) {
            prevEntry = currentIndex > 0 ? entries[currentIndex - 1] : undefined;
            nextEntry = currentIndex < entries.length - 1 ? entries[currentIndex + 1] : undefined;

            currentEntry = entries[currentIndex]
        }

        return { prevEntry: prevEntry, currentEntry: currentEntry, nextEntry: nextEntry }
    }

    return (
        <div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
            <div style={{ display: 'flex', flexDirection: 'column', zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
                {selectedRegion && selectedDistrict && selectedYear && mode === 'edit' &&
                    <>
                        <Button icon={<IconExclamationCircle />} appearance='transparent' onClick={() => saveFeatures(map_id)} />

                        <Tooltip content={"Отмена"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                            <Button disabled={getEntries().prevEntry ? false : true} icon={<IconArrowBackUp />} appearance='transparent' onClick={() => {
                                //getDraw(map_id)?.removeLastPoint()
                                const { prevEntry } = getEntries()
                                if (prevEntry) {
                                    console.log(prevEntry)
                                    setCurrentChange(map_id, prevEntry[0])
                                }
                            }
                            } />
                        </Tooltip>

                        <Tooltip content={"Повтор"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                            <Button disabled={getEntries().nextEntry ? false : true} icon={<IconArrowForwardUp />} appearance='transparent' onClick={() => {
                                //getDraw(map_id)?.removeLastPoint()
                                const { nextEntry } = getEntries()
                                if (nextEntry) {
                                    console.log(nextEntry)
                                    setCurrentChange(map_id, nextEntry[0])
                                }
                            }
                            } />
                        </Tooltip>

                        <Tooltip content={"Редактировать"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                            <Button icon={<SelectObjectSkewEditRegular />} appearance={currentTool === 'Edit' ? 'primary' : 'transparent'} onClick={() => {
                                setCurrentTool(map_id, 'Edit')
                            }} />
                        </Tooltip>

                        <Tooltip content={"Выделение"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                            <Button icon={<SelectObjectRegular />} appearance={currentTool === 'Selection' ? 'primary' : 'transparent'} onClick={() => {
                                if (currentTool === 'Selection') {
                                    map?.removeInteraction(selectionDragBox)
                                    setCurrentTool(map_id, null)
                                } else {
                                    setCurrentTool(map_id, 'Selection')
                                }
                            }} />
                        </Tooltip>

                        <Tooltip content={"Точка"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                            <Button icon={<IconPoint />} appearance={currentTool === 'Point' ? 'primary' : 'transparent'} onClick={() => {
                                setCurrentTool(map_id, 'Point')
                            }} />
                        </Tooltip>

                        <Tooltip content={"Линия"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                            <Button icon={<IconLine />} appearance={currentTool === 'LineString' ? 'primary' : 'transparent'} onClick={() => {
                                setCurrentTool(map_id, 'LineString')
                            }} />
                        </Tooltip>

                        <Tooltip content={"Многоугольник"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                            <Button icon={<IconPolygon />} appearance={currentTool === 'Polygon' ? 'primary' : 'transparent'} onClick={() => {
                                setCurrentTool(map_id, 'Polygon')
                            }} />
                        </Tooltip>

                        <Tooltip content={"Окружность"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                            <Button icon={<IconCircle />} appearance={currentTool === 'Circle' ? 'primary' : 'transparent'} onClick={() => {
                                setCurrentTool(map_id, 'Circle')
                            }} />
                        </Tooltip>

                        <Tooltip content={"Перемещение"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                            <Button icon={<IconArrowsMove />} appearance={currentTool === 'Mover' ? 'primary' : 'transparent'} onClick={() => {
                                setCurrentTool(map_id, 'Mover')
                            }} />
                        </Tooltip>
                    </>}
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
                <Tooltip content={"Приблизить"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                    <Button icon={<AddFilled />} appearance={'transparent'} onClick={() => {
                        const currentZoom = map?.getView().getZoom()
                        if (currentZoom) {
                            // map?.getView().setZoom(currentZoom + 1)
                            map?.getView().animate({
                                zoom: currentZoom + 1,
                                duration: 100
                            })
                        }
                    }} />
                </Tooltip>


                <Tooltip content={"Отдалить"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                    <Button icon={<SubtractFilled />} appearance={'transparent'} onClick={() => {
                        const currentZoom = map?.getView().getZoom()
                        if (currentZoom) {
                            // map?.getView().setZoom(currentZoom - 1)
                            map?.getView().animate({
                                zoom: currentZoom - 1,
                                duration: 100
                            })
                        }
                    }} />
                </Tooltip>
            </div>

            <div style={{ display: 'flex', flexDirection: 'column', zIndex: 1, backdropFilter: 'blur(8px)', backgroundColor: colorScheme === 'light' ? '#FFFFFFAA' : '#000000AA', borderRadius: '4px' }}>
                <Tooltip content={"Линейка"} relationship='label' hideDelay={0} showDelay={0} withArrow>
                    <Button icon={<RulerRegular />} appearance={currentTool === 'Measure' ? 'primary' : 'transparent'} onClick={() => {
                        setCurrentTool(map_id, 'Measure')
                    }} />
                </Tooltip>
            </div>
        </div>
    )
}

export default MapToolbar