import * as React from 'react';
import { Draggable, Droppable } from '../dnd';
import { Icon } from '../icons';
import SimpleButton from '../SimpleButton';
import { DragAndDropContext } from './DragAndDropContext';
import { Box, Flex } from '../Flex';
export function TabList({ tabs, onRemoveTab, onRemoveToolbar, onChangeTabName, disabled, onNewTab, }) {
    return (React.createElement(Droppable, { droppableId: "MAIN", type: "TAB", direction: "horizontal" }, (provided) => (React.createElement("div", { ...provided.droppableProps, className: "ab-ModuleSelector__TabList twa:flex twa:flex-1 twa:overflow-auto", ref: provided.innerRef, "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) }))),
        !disabled && onNewTab ? (React.createElement(Flex, { alignItems: "center", justifyContent: "center", className: "ab-ModuleSelector__TabItem twa:min-w-32 twa:border-dashed twa:cursor-pointer twa:bg-primarylight twa:text-primary-foreground twa:hover:bg-primary", onClick: onNewTab },
            React.createElement("div", { className: "twa:text-8 twa:flex twa:flex-col twa:gap-4 twa:items-center twa:italic" },
                React.createElement(Icon, { name: "plus", size: 32 }),
                "Click to add tab"))) : null,
        provided.placeholder))));
}
export function TabItem({ tab, tabIndex, onRemove, onRemoveToolbar, onChangeTabName, disabled, }) {
    const context = React.useContext(DragAndDropContext);
    const isDragDisabled = disabled || !context.permittedActions.dragAndDropTab;
    return (React.createElement(Draggable, { isDragDisabled: isDragDisabled, draggableId: String(tabIndex), index: tabIndex }, (provided) => {
        let showHeader = true;
        if (tab.Name === '' &&
            !context.permittedActions.editTabName &&
            !context.permittedActions.deleteTab) {
            showHeader = false;
        }
        return (React.createElement("div", { className: "ab-ModuleSelector__TabItem twa:min-w-32", "data-name": "dashboard-tab", ref: provided.innerRef, ...provided.draggableProps, style: {
                ...(isDragDisabled ? {} : provided.draggableProps.style),
            } },
            showHeader ? (React.createElement("div", { className: "ab-ModuleSelector__TabItem__header" },
                React.createElement("div", { ...(disabled ? {} : provided.dragHandleProps), style: context.permittedActions.dragAndDropTab
                        ? {}
                        : {
                            display: 'none',
                        } },
                    React.createElement(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, { disabled: disabled, icon: "delete", variant: "text", onClick: onRemove })))) : null,
            React.createElement(ToolbarList, { disabled: disabled, toolbars: tab.Items, droppableId: String(tabIndex), onRemove: onRemoveToolbar })));
    }));
}
export function ToolbarList({ toolbars, droppableId, onRemove, disabled, }) {
    return (React.createElement(Droppable, { droppableId: droppableId, type: "TOOLBAR" }, (provided, snapshot) => (React.createElement(Box, { className: "ab-ModuleSelector__ToolbarList", ref: provided.innerRef, ...(disabled ? {} : provided.droppableProps), "data-name": "dashboard-toolbar-drop-target", style: {
            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) }))),
        toolbars.length === 0 ? (React.createElement("div", { className: "ab-ModuleSelector__ToolbarList__placeholder twa:flex twa:items-center twa:justify-center twa:h-full twa:italic twa:text-center" }, "Drag and drop toolbar here")) : null,
        provided.placeholder))));
}
export function ToolbarItem({ toolbar, toolbarIndex, onRemove, disabled, }) {
    const { availableItems } = React.useContext(DragAndDropContext);
    let currentItem = availableItems.find((t) => t.Id === toolbar);
    const title = currentItem ? currentItem.Title : toolbar;
    return (React.createElement(Draggable, { isDragDisabled: disabled, draggableId: toolbar, index: toolbarIndex }, (provided, snapshot) => (React.createElement(Flex, { className: `ab-ModuleSelector__ToolbarItem twa:mb-1 twa:pl-1`, alignItems: "center", ref: provided.innerRef, ...provided.draggableProps, ...provided.dragHandleProps, style: {
            ...provided.draggableProps.style,
            backgroundColor: snapshot.isDragging
                ? 'var(--ab-dashboard-toolbar-drag__background)'
                : 'var(--ab-color-primarylight)',
        } },
        React.createElement("div", { className: "twa:flex-1" }, title),
        React.createElement(SimpleButton, { disabled: disabled, icon: "close", variant: "text", className: "twa:p-1", onClick: onRemove })))));
}
