import { useEffect } from "react";
import { v4 as uuidv4 } from "uuid";
import { Tab, TabList } from "@fluentui/react-tabs";
import MapComponent from "../components/map/MapComponent";

import {
    useAppStore,
    setCurrentTab,
    deleteMapTab,
} from "../store/app";
import { initializeMapState, useMapStore } from "../store/map";
import { initializeObjectsState } from "../store/objects";

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.forEach((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.forEach((tab) => deleteMapTab(tab.id));
        };
    }, []);

    return (
        <div style={{ height: "100%", width: "100%", position: "relative" }}>
            <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
                <TabList
                    selectedValue={currentTab}
                    onTabSelect={(_, data) => setCurrentTab(data.value as string)}
                >
                    {Object.entries(mapTab).map(([key]) => (
                        <Tab value={key} key={key}>
                            {id[key]?.mapLabel ?? `Tab ${key}`}
                        </Tab>
                    ))}
                </TabList>

                <div style={{ flexGrow: 1, position: "relative" }}>
                    {Object.entries(mapTab).map(([key]) =>
                        currentTab === key ? (
                            <div key={key} style={{ height: "100%", position: "relative" }}>
                                <MapComponent key={key} id={key} active={true} />
                            </div>
                        ) : null
                    )}
                </div>
            </div>
        </div>
    );
}

export default MapTest;