"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.UnusedPanel = UnusedPanel;
const tslib_1 = require("tslib");
const React = tslib_1.__importStar(require("react"));
const dnd_1 = require("../dnd");
const DragAndDropContext_1 = require("./DragAndDropContext");
const Flex_1 = require("../Flex");
const clsx_1 = tslib_1.__importDefault(require("clsx"));
function UnusedPanel({ items, disabled, title, dragItemText, }) {
    return (React.createElement(Flex_1.Box, { className: "ab-ModuleSelector__UnusedPanel twa:mb-2 twa:pb-1", "data-name": "unusedpanel-items" },
        React.createElement(Flex_1.Box, { className: "twa:p-2" },
            React.createElement("b", null, title),
            " (",
            dragItemText,
            ")"),
        React.createElement(UnusedItemList, { disabled: disabled, items: items })));
}
function UnusedItemList({ items, disabled }) {
    return (React.createElement(dnd_1.Droppable, { droppableId: "UNUSED", type: "TOOLBAR", isDropDisabled: true, direction: "horizontal" }, (provided) => (React.createElement("div", { ref: provided.innerRef, "data-name": "unusedpanel-items-list", ...provided.droppableProps, className: 'twa:px-2 twa:flex-wrap twa:flex twa:flex-row twa:gap-1' },
        items.map((unusedItem, unusedItemIndex) => (React.createElement(UnusedItem, { disabled: disabled, key: unusedItem, unusedItem: unusedItem, unusedItemIndex: unusedItemIndex }))),
        provided.placeholder))));
}
function UnusedItem({ unusedItem, unusedItemIndex, disabled, }) {
    const { availableItems } = React.useContext(DragAndDropContext_1.DragAndDropContext);
    let currentItem = availableItems.find((t) => t.Id === unusedItem);
    const title = currentItem ? currentItem.Title : unusedItem;
    return (React.createElement(dnd_1.Draggable, { isDragDisabled: disabled, draggableId: unusedItem, index: unusedItemIndex }, (provided, snapshot) => {
        const eventHandlers = disabled
            ? {}
            : {
                ...provided.draggableProps,
                ...provided.dragHandleProps,
            };
        const dragStyle = disabled ? {} : provided.draggableProps.style;
        return (React.createElement("div", { "data-name": "unused-item", ref: provided.innerRef, ...eventHandlers, className: (0, clsx_1.default)('twa:rounded-md twa:text-sm twa:text-text-on-primary twa:p-2'), style: {
                ...dragStyle,
                border: '1px solid var(--ab-color-primary)',
                backgroundColor: snapshot.isDragging
                    ? 'var(--ab-dashboard-toolbar-drag__background)'
                    : 'var(--ab-color-primary)',
            } }, title));
    }));
}
