"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.ToolbarItem = exports.ToolbarList = exports.TabItem = exports.TabList = void 0;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const dnd_1 = require("../dnd");
const rebass_1 = require("rebass");
const icons_1 = require("../icons");
const SimpleButton_1 = tslib_1.__importDefault(require("../SimpleButton"));
const DragAndDropContext_1 = require("./DragAndDropContext");
function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, }) {
    return (React.createElement(dnd_1.Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList", ref: provided.innerRef, style: { display: 'flex' }, "data-name": "dashboard-tabs" },
        tabs.map((tab, tabIndex) => (React.createElement(TabItem, { disabled: disabled, key: tabIndex, tabIndex: tabIndex, tab: tab, onRemove: () => onRemoveTab(tabIndex), onRemoveToolbar: (toolbarIndex) => onRemoveToolbar(tabIndex, toolbarIndex), onChangeTabName: (tabName) => onChangeTabName(tabIndex, tabName) }))),
        provided.placeholder))));
}
exports.TabList = TabList;
function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
    const context = React.useContext(DragAndDropContext_1.DragAndDropContext);
    const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
    return (React.createElement(dnd_1.Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => (React.createElement("div", { className: "ab-ModuleSelector__TabItem", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
            ...(isDragDisabled ? {} : provided.draggableProps.style),
        } },
        React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
            React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
                    ? {}
                    : {
                        display: 'none',
                    } },
                React.createElement(icons_1.Icon, { name: "drag" })),
            context.permittedActions.editTabName ? (React.createElement("input", { className: "ab-ModuleSelector__TabItem__header-input", type: "text", disabled: disabled, value: tab.Name, onChange: (event) => {
                    onChangeTabName(event.target.value);
                } })) : (tab.Name),
            context.permittedActions.deleteTab && (React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove }))),
        React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })))));
}
exports.TabItem = TabItem;
function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
    return (React.createElement(dnd_1.Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(rebass_1.Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", backgroundColor: snapshot.isDraggingOver ? 'var(--ab-dashboard-tab-drop-target__background)' : '' },
        toolbars?.map((toolbar, toolbarIndex) => (React.createElement(ToolbarItem, { disabled: disabled, key: toolbar, toolbar: toolbar, toolbarIndex: toolbarIndex, onRemove: () => onRemove(toolbarIndex) }))),
        provided.placeholder))));
}
exports.ToolbarList = ToolbarList;
function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
    const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
    let currentItem = availableItems.find((t) => t.Id === toolbar);
    const title = currentItem ? currentItem.Title : toolbar;
    return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(rebass_1.Flex, { className: "ab-ModuleSelector__ToolbarItem", alignItems: "center", mb: 1, pl: 1, backgroundColor: snapshot.isDragging
            ? 'var(--ab-dashboard-toolbar-drag__background)'
            : 'var(--ab-color-primarylight)', ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: provided.draggableProps.style },
        React.createElement("div", { style: { flex: 1 } }, title),
        React.createElement(SimpleButton_1.default, { disabled: disabled, icon: "close", variant: "text", padding: 1, onClick: onRemove })))));
}
exports.ToolbarItem = ToolbarItem;
