import { Container, Stack, Tabs } from '@mantine/core'
import MapComponent from '../components/map/MapComponent'
import { useEffect } from 'react'
import { initializeObjectsState } from '../store/objects'
import { deleteMapTab, setCurrentTab, useAppStore } from '../store/app'
import { initializeMapState, useMapStore } from '../store/map'
import { v4 as uuidv4 } from 'uuid'

function MapTest() {
    const { mapTab, currentTab } = useAppStore()
    const { id } = useMapStore()

    const tabs = [
        {
            id: uuidv4(),
            year: 2018,
            region: 11,
            district: 146,
        },
        // {
        //     id: uuidv4(),
        //     year: 2023,
        //     region: 11,
        //     district: 146,
        // },
    ]

    useEffect(() => {
        tabs.map(tab => useAppStore.setState((state) => {
            initializeObjectsState(tab.id, tab.region, tab.district, null, tab.year)
            initializeMapState(tab.id)

            return {
                mapTab: {
                    ...state.mapTab,
                    [tab.id]: {
                        year: tab.year,
                        region: tab.region,
                        district: tab.district
                    }
                }
            }
        }))

        setCurrentTab(tabs[0].id)

        return () => {
            tabs.map(tab => deleteMapTab(tab.id))
        }
    }, [])

    return (
        <Container fluid w='100%' pos='relative' p={0}>
            <Tabs h='100%' variant='default' value={currentTab} onChange={setCurrentTab} keepMounted={true}>
                <Stack gap={0} h='100%'>
                    <Tabs.List>
                        {Object.entries(mapTab).map(([key]) => (
                            <Tabs.Tab value={key} key={key}>
                                {id[key]?.mapLabel}
                            </Tabs.Tab>
                        ))}
                    </Tabs.List>

                    {Object.entries(mapTab).map(([key]) => (
                        <Tabs.Panel value={key} key={key} h='100%' pos='relative'>
                            <MapComponent
                                key={key}
                                id={key}
                                active={currentTab === key}
                            />

                        </Tabs.Panel>
                    ))}
                </Stack>

            </Tabs>

        </Container>
    )
}

export default MapTest