"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 PanelWithButton_1 = require("../../View/Components/Panels/PanelWithButton");
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const DragAndDropContext_1 = require("./DragAndDropContext");
const TabList_1 = require("./TabList");
const UnusedPanel_1 = require("./UnusedPanel");
const ModuleManager = (props) => {
    const { availableItems, tabs, onTabsChange, tabsTitle, disabled, unusedPanelTitle, dragItemText, permittedActions, } = 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("div", { className: "ab-ModuleSelector", style: { display: 'flex', flexDirection: 'column' } },
                React.createElement(UnusedPanel_1.UnusedPanel, { title: unusedPanelTitle, disabled: disabled, items: unusedItems, dragItemText: dragItemText }),
                React.createElement(PanelWithButton_1.PanelWithButton, { className: "ab-ModuleSelector-UsedPanel", headerText: tabsTitle, button: contextValue.permittedActions.createTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, onClick: handleTabAdd }, "Add Tab")) },
                    React.createElement(TabList_1.TabList, { disabled: disabled, tabs: tabs, onRemoveTab: handleRemoveTab, onRemoveToolbar: handleRemoveToolbar, onChangeTabName: handleChangeTabName }))))));
};
exports.ModuleManager = ModuleManager;
