import { Button, Dropdown, Field, Menu, MenuButton, MenuList, MenuPopover, MenuTrigger, Option } from '@fluentui/react-components';
import { IconBoxMultiple, IconPlus, IconUpload } from '@tabler/icons-react';
import MapLayers from './MapLayers';
import { setSatMapsProvider, useMapStore } from '../../../store/map';
import { satMapsProviders } from '../../../constants/map';
import { IRectCoords, SatelliteMapsProvider } from '../../../interfaces/map';
import GisService from '../../../services/GisService';
import { Extent } from 'ol/extent';

const MapLayersSelect = ({
    map_id
}: {
    map_id: string
}) => {
    const { map, satMapsProvider, file, polygonExtent, rectCoords } = useMapStore().id[map_id]

    // Upload map overlay
    const submitOverlay = async (file: File | null, polygonExtent: Extent | undefined, rectCoords: IRectCoords | undefined) => {
        await GisService.uploadOverlay(file, polygonExtent, rectCoords).then(res => {
            console.log(res)
        })
    }

    return (
        <Menu persistOnItemClick positioning={{ autoSize: true }}>
            <MenuTrigger disableButtonEnhancement>
                <MenuButton appearance='subtle' icon={<IconBoxMultiple />}>Слои</MenuButton>
            </MenuTrigger>

            <MenuPopover>
                <MenuList style={{ padding: '1rem' }}>
                    <Field>Настройка видимости слоёв</Field>

                    <div style={{ display: 'flex', alignItems: 'center', gap: '1rem' }}>
                        <Field label="Спутниковые снимки">
                            <Dropdown
                                value={satMapsProviders.find(provider => provider.value === satMapsProvider)?.label}
                                selectedOptions={[satMapsProvider]}
                                onOptionSelect={(_ev, data) => {
                                    if (data.optionValue) {
                                        setSatMapsProvider(map_id, data.optionValue as SatelliteMapsProvider);
                                    }
                                }}
                            >
                                {satMapsProviders.map((provider) => (
                                    <Option key={provider.value} text={provider.label} value={provider.value}>
                                        {provider.label}
                                    </Option>
                                ))}
                            </Dropdown>
                        </Field>
                    </div>
                    <div style={{
                        display: 'flex',
                    }}>
                        <Button icon={<IconUpload />} appearance='transparent' onClick={() => submitOverlay(file, polygonExtent, rectCoords)} />

                        <Button icon={<IconPlus />} appearance='transparent' title='Добавить подложку' />
                    </div>
                    <MapLayers map={map} />
                </MenuList>
            </MenuPopover>
        </Menu>
    )
}

export default MapLayersSelect