import { Button, Flex, FloatingIndicator, Popover, SegmentedControl } from '@mantine/core'
import { Mode, setMode, useMapStore } from '../../store/map'
import { IconChevronDown, IconCropLandscape, IconCropPortrait, IconEdit, IconEye, IconPrinter } from '@tabler/icons-react'
import { useEffect, useState } from 'react'
import { PrintOrientation, setPrintOrientation, usePrintStore } from '../../store/print'

const MapMode = ({
    map_id
}: { map_id: string }) => {
    const [rootRef, setRootRef] = useState<HTMLDivElement | null>(null);
    const [controlsRefs, setControlsRefs] = useState<Record<string, HTMLButtonElement | null>>({});

    const { mode } = useMapStore().id[map_id]

    const setControlRef = (item: Mode) => (node: HTMLButtonElement) => {
        controlsRefs[item] = node;
        setControlsRefs(controlsRefs);
    }

    const { printOrientation } = usePrintStore()

    useEffect(() => {

    }, [printOrientation])

    return (
        <Flex ref={setRootRef} p={4} gap={4}>
            <Button
                variant={mode === 'view' ? 'filled' : 'subtle'}
                key={'view'}
                ref={setControlRef('view' as Mode)}
                onClick={() => {
                    setMode(map_id, 'view' as Mode)
                }}
                leftSection={<IconEye size={16} />}
                mod={{ active: mode === 'view' as Mode }}
            >
                Просмотр
            </Button>

            <Button
                variant={mode === 'edit' ? 'filled' : 'subtle'}
                key={'edit'}
                ref={setControlRef('edit' as Mode)}
                onClick={() => {
                    setMode(map_id, 'edit' as Mode)
                }}
                leftSection={<IconEdit size={16} />}
                mod={{ active: mode === 'edit' as Mode }}
            >
                Редактирование
            </Button>

            <Popover width='auto' position='bottom-end' >
                <Popover.Target>
                    <Button.Group>
                        <Button
                            variant={mode === 'print' ? 'filled' : 'subtle'}
                            key={'print'}
                            ref={setControlRef('print' as Mode)}
                            onClick={(e) => {
                                e.stopPropagation()
                                setMode(map_id, 'print' as Mode)
                            }}
                            leftSection={<IconPrinter size={16} />}
                            mod={{ active: mode === 'print' as Mode }}
                        >
                            Печать
                        </Button>
                        <Button variant={mode === 'print' ? 'filled' : 'subtle'} w='auto' p={8} title='Ориентация'>
                            <IconChevronDown size={16} />
                        </Button>
                    </Button.Group>
                </Popover.Target>

                <Popover.Dropdown p={0} style={{ display: 'flex' }}>
                    <SegmentedControl
                        color='blue'
                        value={printOrientation}
                        onChange={(value) => {
                            setPrintOrientation(value as PrintOrientation)
                            setMode(map_id, 'print' as Mode)
                        }}
                        data={[
                            {
                                value: 'horizontal',
                                label: (
                                    <IconCropLandscape title='Горизонтальная' style={{ display: 'block' }} size={20} />
                                ),
                            },
                            {
                                value: 'vertical',
                                label: (
                                    <IconCropPortrait title='Вертикальная' style={{ display: 'block' }} size={20} />
                                ),
                            },
                        ]}
                    />
                </Popover.Dropdown>
            </Popover>

            <FloatingIndicator target={controlsRefs[mode]} parent={rootRef} />
        </Flex >
    )
}

export default MapMode