import { Tab, TabList } from "@fluentui/react-tabs";
import MapComponent from "../components/map/MapComponent";
import { DragDropContext, Droppable, Draggable } from "@hello-pangea/dnd";

import {
    useAppStore,
    setCurrentTab,
    deleteMapTab,
    addMapTab,
    reorderTabs,
} from "../store/app";
import { initializeMapState, useMapStore } from "../store/map";
import { initializeObjectsState } from "../store/objects";
import { Button } from "@fluentui/react-components";
import { Add12Filled, Dismiss12Filled, Map16Regular } from "@fluentui/react-icons";

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

    const handleDragEnd = (result: any) => {
        if (!result.destination) return
        reorderTabs(result.source.index, result.destination.index)
    }

    return (
        <div style={{ height: "100%", width: "100%", position: "relative" }}>
            <div style={{ display: "flex", flexDirection: "column", height: "100%" }}>
                <DragDropContext onDragEnd={handleDragEnd}>
                    <Droppable droppableId="tabs" direction="horizontal">
                        {(provided) => (
                            <TabList
                                ref={provided.innerRef}
                                {...provided.droppableProps}
                                size="small"
                                selectedValue={currentTab}
                                onTabSelect={(_, data) => setCurrentTab(data.value as string)}
                                style={{ borderBottom: '1px solid var(--colorNeutralShadowKey)' }}
                                onDragStart={(e) => {
                                    e.stopPropagation();   // stop TabList from also handling it
                                }}
                                onDrag={(e) => e.stopPropagation()}
                            >
                                {tabOrder.map((key, index) => (
                                    <Draggable disableInteractiveElementBlocking draggableId={key} index={index} key={key}>
                                        {(dragProvided) => (
                                            <div
                                                ref={dragProvided.innerRef}
                                                {...dragProvided.draggableProps}
                                                {...dragProvided.dragHandleProps}
                                            >
                                                <Tab value={key} icon={<Map16Regular />}>
                                                    {id[key]?.mapLabel ?? `Tab ${key}`}
                                                    <Button
                                                        as='a'
                                                        style={{ marginLeft: '0.5rem' }}
                                                        size="small"
                                                        icon={<Dismiss12Filled />}
                                                        appearance="subtle"
                                                        onClick={(e) => {
                                                            e.stopPropagation()
                                                            deleteMapTab(key)
                                                        }}
                                                    />
                                                </Tab>
                                            </div>
                                        )}
                                    </Draggable>
                                ))}

                                {provided.placeholder}

                                <Button
                                    icon={<Add12Filled />}
                                    title="Открыть новую вкладку"
                                    appearance="subtle"
                                    onClick={() => {
                                        const newId = addMapTab();
                                        initializeObjectsState(newId, null, null, null, null);
                                        initializeMapState(newId);
                                    }}
                                />
                            </TabList>
                        )}
                    </Droppable>
                </DragDropContext>

                <div style={{ flexGrow: 1, position: "relative" }}>
                    {tabOrder.map((key) => (
                        <div key={key} style={{ height: "100%", position: "relative", display: currentTab === key ? 'unset' : 'none' }}>
                            <MapComponent id={key} active={currentTab === key} />
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

export default MapTest;