"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ModuleManager = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const dnd_1 = require("../dnd");
const DragAndDropContext_1 = require("./DragAndDropContext");
const TabList_1 = require("./TabList");
const UnusedPanel_1 = require("./UnusedPanel");
const Flex_1 = require("../Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
const Card_1 = require("../Card");
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(dnd_1.DragDropContext, { onDragEnd: (result) => {
            if (result.type === 'TAB')
                handleTabDragEnd(result);
            if (result.type === 'TOOLBAR')
                handleToolbarDragEnd(result);
        } },
        React.createElement(DragAndDropContext_1.DragAndDropContext.Provider, { value: contextValue },
            React.createElement(Flex_1.Flex, { flexDirection: "column", className: (0, clsx_1.default)('ab-ModuleSelector twa:flex-1', className) },
                React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
                React.createElement(Card_1.Card, { className: "twa:flex-1 twa:m-2 ab-ModuleSelector-UsedPanel" },
                    React.createElement(Card_1.Card.Title, { border: false }, tabsTitle),
                    React.createElement(Card_1.Card.Body, { className: "twa:px-2" },
                        React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName, onNewTab: contextValue.permittedActions.createTab ? handleTabAdd : undefined })))))));
};
exports.ModuleManager = ModuleManager;
