import * as React from 'react';
import { DragDropContext } from '../dnd';
import { DragAndDropContext } from './DragAndDropContext';
import { TabList } from './TabList';
import { UnusedPanel } from './UnusedPanel';
import { Flex } from '../Flex';
import clsx from 'clsx';
import { Card } from '../Card';
export const ModuleManager = (props) => {
    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, className, } = props;
    const contextValue = React.useMemo(() => {
        const preparedPermittedAction = {
            createTab: true,
            editTabName: true,
            dragAndDropTab: true,
            deleteTab: true,
            // override default permitted actions
            ...permittedActions,
        };
        return {
            permittedActions: preparedPermittedAction,
            availableItems: props.availableItems,
        };
    }, [props.availableItems, props.permittedActions]);
    const unusedItems = React.useMemo(() => availableItems
        .map((t) => t.Id)
        .filter((item) => {
        return !tabs.some((tab) => tab.Items?.includes(item));
    }), [tabs, availableItems]);
    const handleToolbarDragEnd = (result) => {
        const { source, destination, draggableId } = result;
        if (!source || !destination) {
            return;
        }
        if (source.droppableId !== 'UNUSED') {
            const sourceTabToolbars = tabs[Number(source.droppableId)].Items;
            sourceTabToolbars.splice(source.index, 1);
        }
        if (destination.droppableId !== 'UNUSED') {
            const destinationTabToolbars = tabs[Number(destination.droppableId)].Items;
            destinationTabToolbars.splice(destination.index, 0, draggableId);
        }
        onTabsChange([...tabs]);
    };
    const handleTabDragEnd = (result) => {
        const { source, destination } = result;
        if (!source || !destination)
            return;
        const [removed] = tabs.splice(source.index, 1);
        tabs.splice(destination.index, 0, removed);
        onTabsChange([...tabs]);
    };
    const handleRemoveTab = (tabIndex) => {
        onTabsChange(tabs.filter((_, index) => index !== tabIndex));
    };
    const handleTabAdd = () => {
        onTabsChange([...tabs, { Name: 'New Tab', Items: [] }]);
    };
    const handleRemoveToolbar = (tabIndex, toolbarIndex) => {
        onTabsChange(tabs.map((tab, index) => {
            if (index !== tabIndex)
                return tab;
            return {
                ...tab,
                Items: tab.Items.filter((_, index) => index !== toolbarIndex),
            };
        }));
    };
    const handleChangeTabName = (tabIndex, tabName) => {
        onTabsChange(tabs.map((tab, index) => {
            if (index !== tabIndex)
                return tab;
            return {
                ...tab,
                Name: tabName,
            };
        }));
    };
    return (React.createElement(DragDropContext, { onDragEnd: (result) => {
            if (result.type === 'TAB')
                handleTabDragEnd(result);
            if (result.type === 'TOOLBAR')
                handleToolbarDragEnd(result);
        } },
        React.createElement(DragAndDropContext.Provider, { value: contextValue },
            React.createElement(Flex, { flexDirection: "column", className: clsx('ab-ModuleSelector twa:flex-1', className) },
                React.createElement(UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
                React.createElement(Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel" },
                    React.createElement(Card.Title, { border: false }, tabsTitle),
                    React.createElement(Card.Body, { className: "twa:px-2" },
                        React.createElement(TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
};
