"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.Toolbar = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * Toolbar Component
 *
 * A configurable toolbar for the workflow builder with various action buttons
 */
const react_1 = require("react");
const prop_types_1 = __importDefault(require("prop-types"));
/**
 * Toolbar component for workflow builder
 * @param {Object} props - Component props
 * @param {Array} props.tools - Array of tool configurations
 * @param {Object} props.workflow - Current workflow data
 * @param {Function} props.onToolAction - Callback for tool actions
 * @param {string} props.position - Position of the toolbar (default: 'top')
 * @param {boolean} props.collapsible - Whether the toolbar can be collapsed (default: true)
 * @param {boolean} props.defaultCollapsed - Default collapsed state (default: false)
 * @param {string} props.orientation - Orientation of the toolbar (default: 'horizontal')
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @returns {React.ReactElement} Toolbar component
 */
const Toolbar = ({ tools = [], workflow = { nodes: [], edges: [] }, onToolAction, position = 'top', collapsible = true, defaultCollapsed = false, orientation = 'horizontal', className = '', style = {}, ...rest }) => {
    // State
    const [collapsed, setCollapsed] = (0, react_1.useState)(defaultCollapsed);
    const [activeCategory, setActiveCategory] = (0, react_1.useState)(null);
    // Default tools if none provided
    const defaultTools = [
        {
            id: 'node-tools',
            type: 'category',
            label: 'Nodes',
            icon: 'cube',
            items: [
                { id: 'add-input', type: 'button', label: 'Input', icon: 'arrow-right-to-bracket', action: 'add-node', nodeType: 'input' },
                { id: 'add-process', type: 'button', label: 'Process', icon: 'gear', action: 'add-node', nodeType: 'process' },
                { id: 'add-decision', type: 'button', label: 'Decision', icon: 'code-branch', action: 'add-node', nodeType: 'decision' },
                { id: 'add-output', type: 'button', label: 'Output', icon: 'arrow-right-from-bracket', action: 'add-node', nodeType: 'output' }
            ]
        },
        {
            id: 'edge-tools',
            type: 'category',
            label: 'Connections',
            icon: 'link',
            items: [
                { id: 'add-edge', type: 'button', label: 'Connect', icon: 'link', action: 'add-edge' },
                { id: 'delete-edge', type: 'button', label: 'Delete Connection', icon: 'unlink', action: 'delete-edge' }
            ]
        },
        {
            id: 'canvas-tools',
            type: 'category',
            label: 'Canvas',
            icon: 'expand',
            items: [
                { id: 'zoom-in', type: 'button', label: 'Zoom In', icon: 'magnifying-glass-plus', action: 'zoom', value: 'in' },
                { id: 'zoom-out', type: 'button', label: 'Zoom Out', icon: 'magnifying-glass-minus', action: 'zoom', value: 'out' },
                { id: 'fit-view', type: 'button', label: 'Fit View', icon: 'expand', action: 'fit-view' }
            ]
        },
        {
            id: 'edit-tools',
            type: 'category',
            label: 'Edit',
            icon: 'pen-to-square',
            items: [
                { id: 'delete', type: 'button', label: 'Delete', icon: 'trash', action: 'delete' },
                { id: 'copy', type: 'button', label: 'Copy', icon: 'copy', action: 'copy' },
                { id: 'paste', type: 'button', label: 'Paste', icon: 'paste', action: 'paste' }
            ]
        },
        {
            id: 'workflow-tools',
            type: 'category',
            label: 'Workflow',
            icon: 'diagram-project',
            items: [
                { id: 'save', type: 'button', label: 'Save', icon: 'save', action: 'save' },
                { id: 'load', type: 'button', label: 'Load', icon: 'folder-open', action: 'load' },
                { id: 'export', type: 'button', label: 'Export', icon: 'file-export', action: 'export' },
                { id: 'import', type: 'button', label: 'Import', icon: 'file-import', action: 'import' }
            ]
        }
    ];
    // Use provided tools or default tools
    const toolsToRender = tools.length > 0 ? tools : defaultTools;
    // Handle tool click
    const handleToolClick = (0, react_1.useCallback)((tool) => {
        if (tool.type === 'category') {
            setActiveCategory(activeCategory === tool.id ? null : tool.id);
            return;
        }
        if (onToolAction) {
            onToolAction(tool);
        }
    }, [activeCategory, onToolAction]);
    // Toggle collapsed state
    const toggleCollapsed = (0, react_1.useCallback)(() => {
        setCollapsed(!collapsed);
    }, [collapsed]);
    // Get positioning style
    const getPositionStyle = () => {
        const isVertical = orientation === 'vertical';
        switch (position) {
            case 'top':
                return {
                    top: 0,
                    left: 0,
                    right: 0,
                    flexDirection: 'row',
                    borderBottom: '1px solid #D1D5DB'
                };
            case 'bottom':
                return {
                    bottom: 0,
                    left: 0,
                    right: 0,
                    flexDirection: 'row',
                    borderTop: '1px solid #D1D5DB'
                };
            case 'left':
                return {
                    top: 0,
                    bottom: 0,
                    left: 0,
                    flexDirection: 'column',
                    borderRight: '1px solid #D1D5DB'
                };
            case 'right':
                return {
                    top: 0,
                    bottom: 0,
                    right: 0,
                    flexDirection: 'column',
                    borderLeft: '1px solid #D1D5DB'
                };
            default:
                return {
                    top: 0,
                    left: 0,
                    right: 0,
                    flexDirection: 'row',
                    borderBottom: '1px solid #D1D5DB'
                };
        }
    };
    // Render icon
    const renderIcon = (icon) => {
        // This is a placeholder for icon rendering
        // In a real implementation, you would use an icon library or SVG icons
        if (!icon)
            return null;
        return ((0, jsx_runtime_1.jsx)("span", { className: `bf-toolbar__icon bf-icon-${icon}`, children: icon.charAt(0).toUpperCase() }));
    };
    // Render a single tool button
    const renderToolButton = (tool) => {
        const isActive = tool.action === 'add-node' && workflow.activeNodeType === tool.nodeType;
        return ((0, jsx_runtime_1.jsxs)("button", { className: `bf-toolbar__button ${isActive ? 'bf-toolbar__button--active' : ''}`, onClick: () => handleToolClick(tool), title: tool.label, "aria-label": tool.label, style: {
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center',
                padding: '8px',
                margin: '2px',
                backgroundColor: isActive ? '#E5E7EB' : 'transparent',
                border: 'none',
                borderRadius: '4px',
                cursor: 'pointer',
                color: '#374151',
                minWidth: '32px',
                minHeight: '32px'
            }, children: [renderIcon(tool.icon), !collapsed && (0, jsx_runtime_1.jsx)("span", { className: "bf-toolbar__label", style: { marginLeft: '4px' }, children: tool.label })] }, tool.id));
    };
    // Render category
    const renderCategory = (category) => {
        const isActive = activeCategory === category.id;
        return ((0, jsx_runtime_1.jsxs)("div", { className: `bf-toolbar__category ${isActive ? 'bf-toolbar__category--active' : ''}`, style: {
                margin: '2px',
                position: 'relative'
            }, children: [(0, jsx_runtime_1.jsxs)("button", { className: "bf-toolbar__category-button", onClick: () => handleToolClick(category), "aria-label": category.label, "aria-expanded": isActive, style: {
                        display: 'flex',
                        alignItems: 'center',
                        justifyContent: 'center',
                        padding: '8px',
                        backgroundColor: isActive ? '#E5E7EB' : 'transparent',
                        border: 'none',
                        borderRadius: '4px',
                        cursor: 'pointer',
                        color: '#374151',
                        minWidth: '32px',
                        minHeight: '32px'
                    }, children: [renderIcon(category.icon), !collapsed && (0, jsx_runtime_1.jsx)("span", { className: "bf-toolbar__label", style: { marginLeft: '4px' }, children: category.label }), !collapsed && ((0, jsx_runtime_1.jsx)("span", { className: "bf-toolbar__dropdown-icon", style: {
                                marginLeft: '4px',
                                transition: 'transform 0.2s ease',
                                transform: isActive ? 'rotate(180deg)' : 'rotate(0deg)',
                                fontSize: '10px'
                            }, children: "\u25BC" }))] }), isActive && category.items && category.items.length > 0 && ((0, jsx_runtime_1.jsx)("div", { className: "bf-toolbar__dropdown", style: {
                        position: 'absolute',
                        top: orientation === 'horizontal' ? '40px' : '0',
                        left: orientation === 'horizontal' ? '0' : '40px',
                        backgroundColor: 'white',
                        border: '1px solid #D1D5DB',
                        borderRadius: '4px',
                        boxShadow: '0 2px 5px rgba(0, 0, 0, 0.1)',
                        zIndex: 10,
                        padding: '4px',
                        display: 'flex',
                        flexDirection: orientation === 'horizontal' ? 'column' : 'row',
                        flexWrap: 'wrap',
                        minWidth: '120px'
                    }, children: category.items.map(item => renderToolButton(item)) }))] }, category.id));
    };
    // Render divider
    const renderDivider = (id) => ((0, jsx_runtime_1.jsx)("div", { className: "bf-toolbar__divider", style: {
            width: orientation === 'horizontal' ? '1px' : '80%',
            height: orientation === 'horizontal' ? '24px' : '1px',
            backgroundColor: '#D1D5DB',
            margin: orientation === 'horizontal' ? '0 8px' : '8px 0'
        } }, id));
    // Classes
    const toolbarClasses = [
        'bf-toolbar',
        `bf-toolbar--${position}`,
        `bf-toolbar--${orientation}`,
        collapsed ? 'bf-toolbar--collapsed' : '',
        className
    ].filter(Boolean).join(' ');
    // Styles
    const toolbarStyle = {
        position: 'absolute',
        display: 'flex',
        backgroundColor: 'white',
        padding: '4px',
        transition: 'all 0.3s ease',
        ...getPositionStyle(),
        ...style
    };
    return ((0, jsx_runtime_1.jsxs)("div", { className: toolbarClasses, style: toolbarStyle, ...rest, children: [collapsible && ((0, jsx_runtime_1.jsx)("button", { className: "bf-toolbar__collapse-button", onClick: toggleCollapsed, "aria-label": collapsed ? 'Expand toolbar' : 'Collapse toolbar', style: {
                    padding: '4px',
                    margin: '2px',
                    backgroundColor: 'transparent',
                    border: 'none',
                    borderRadius: '4px',
                    cursor: 'pointer',
                    color: '#374151',
                    minWidth: '24px',
                    minHeight: '24px',
                    display: 'flex',
                    alignItems: 'center',
                    justifyContent: 'center',
                    fontSize: '14px'
                }, children: orientation === 'horizontal'
                    ? (collapsed ? '▼' : '▲')
                    : (position === 'left'
                        ? (collapsed ? '▶' : '◀')
                        : (collapsed ? '◀' : '▶')) })), toolsToRender.map((tool, index) => {
                if (tool.type === 'divider') {
                    return renderDivider(`divider-${index}`);
                }
                else if (tool.type === 'category') {
                    return renderCategory(tool);
                }
                else {
                    return renderToolButton(tool);
                }
            })] }));
};
exports.Toolbar = Toolbar;
exports.Toolbar.propTypes = {
    tools: prop_types_1.default.arrayOf(prop_types_1.default.oneOfType([
        // Button tool
        prop_types_1.default.shape({
            id: prop_types_1.default.string.isRequired,
            type: prop_types_1.default.oneOf(['button']).isRequired,
            label: prop_types_1.default.string.isRequired,
            icon: prop_types_1.default.string,
            action: prop_types_1.default.string.isRequired,
            nodeType: prop_types_1.default.string,
            value: prop_types_1.default.any
        }),
        // Category tool
        prop_types_1.default.shape({
            id: prop_types_1.default.string.isRequired,
            type: prop_types_1.default.oneOf(['category']).isRequired,
            label: prop_types_1.default.string.isRequired,
            icon: prop_types_1.default.string,
            items: prop_types_1.default.array
        }),
        // Divider
        prop_types_1.default.shape({
            type: prop_types_1.default.oneOf(['divider']).isRequired,
        })
    ])),
    workflow: prop_types_1.default.shape({
        nodes: prop_types_1.default.array,
        edges: prop_types_1.default.array,
        activeNodeType: prop_types_1.default.string,
        selectedNodeId: prop_types_1.default.string,
        selectedEdgeId: prop_types_1.default.string
    }),
    onToolAction: prop_types_1.default.func,
    position: prop_types_1.default.oneOf(['top', 'bottom', 'left', 'right']),
    collapsible: prop_types_1.default.bool,
    defaultCollapsed: prop_types_1.default.bool,
    orientation: prop_types_1.default.oneOf(['horizontal', 'vertical']),
    className: prop_types_1.default.string,
    style: prop_types_1.default.object
};
exports.default = exports.Toolbar;
//# sourceMappingURL=Toolbar.js.map