"use strict";
var __importDefault = (this && this.__importDefault) || function (mod) {
    return (mod && mod.__esModule) ? mod : { "default": mod };
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.ColumnDragHandle = exports.GroupDropZone = void 0;
const jsx_runtime_1 = require("react/jsx-runtime");
/**
 * GroupDropZone Component
 *
 * Provides a drag and drop zone for grouping data in a data table
 */
const react_1 = require("react");
const prop_types_1 = __importDefault(require("prop-types"));
/**
 * GroupDropZone component
 * @param {Object} props - Component props
 * @param {Array} props.columns - Column definitions
 * @param {Array} props.groupBy - Current grouping columns
 * @param {Function} props.onGroupingChange - Grouping change handler
 * @param {string} props.className - Additional CSS classes
 * @param {Object} props.style - Additional inline styles
 * @param {string} props.placeholder - Placeholder text when no groups
 * @returns {React.ReactElement} GroupDropZone component
 */
const GroupDropZone = ({ columns = [], groupBy = [], onGroupingChange, className = '', style = {}, placeholder = 'Drag columns here to group', ...rest }) => {
    // Refs
    const dropZoneRef = (0, react_1.useRef)(null);
    // State
    const [isOver, setIsOver] = (0, react_1.useState)(false);
    const [activeGroups, setActiveGroups] = (0, react_1.useState)(groupBy);
    // Update active groups when groupBy changes
    (0, react_1.useEffect)(() => {
        setActiveGroups(groupBy);
    }, [groupBy]);
    // Find column by key
    const findColumn = (key) => {
        return columns.find(col => col.key === key);
    };
    // Drag event handlers
    const handleDragOver = (e) => {
        e.preventDefault();
        setIsOver(true);
    };
    const handleDragLeave = () => {
        setIsOver(false);
    };
    const handleDrop = (e) => {
        e.preventDefault();
        setIsOver(false);
        // Get the column key from the drag data
        const columnKey = e.dataTransfer.getData('text/plain');
        // Check if the column exists and isn't already grouped
        if (!columnKey || activeGroups.includes(columnKey))
            return;
        // Add the column to the grouping
        const newGroups = [...activeGroups, columnKey];
        setActiveGroups(newGroups);
        onGroupingChange(newGroups);
    };
    // Handle removing a group
    const handleRemoveGroup = (columnKey) => {
        const newGroups = activeGroups.filter(key => key !== columnKey);
        setActiveGroups(newGroups);
        onGroupingChange(newGroups);
    };
    // Handle reordering groups with drag and drop
    const handleGroupDragStart = (e, columnKey, index) => {
        e.dataTransfer.setData('application/x-group-index', index);
        e.dataTransfer.setData('application/x-group-key', columnKey);
        e.dataTransfer.effectAllowed = 'move';
    };
    const handleGroupDragOver = (e, targetIndex) => {
        e.preventDefault();
        e.dataTransfer.dropEffect = 'move';
    };
    const handleGroupDrop = (e, targetIndex) => {
        e.preventDefault();
        // Get the source index and key
        const sourceIndex = parseInt(e.dataTransfer.getData('application/x-group-index'), 10);
        const sourceKey = e.dataTransfer.getData('application/x-group-key');
        // Don't do anything if dropped on itself
        if (sourceIndex === targetIndex)
            return;
        // Create a new array with the item moved
        const newGroups = [...activeGroups];
        newGroups.splice(sourceIndex, 1);
        newGroups.splice(targetIndex, 0, sourceKey);
        setActiveGroups(newGroups);
        onGroupingChange(newGroups);
    };
    // Classes
    const dropZoneClasses = [
        'bf-group-drop-zone',
        isOver ? 'bf-group-drop-zone--over' : '',
        className
    ].filter(Boolean).join(' ');
    return ((0, jsx_runtime_1.jsx)("div", { ref: dropZoneRef, className: dropZoneClasses, style: style, onDragOver: handleDragOver, onDragLeave: handleDragLeave, onDrop: handleDrop, ...rest, children: activeGroups.length > 0 ? ((0, jsx_runtime_1.jsxs)("div", { className: "bf-group-drop-zone__groups", children: [activeGroups.map((columnKey, index) => {
                    const column = findColumn(columnKey);
                    if (!column)
                        return null;
                    return ((0, jsx_runtime_1.jsxs)("div", { className: "bf-group-drop-zone__group", draggable: true, onDragStart: (e) => handleGroupDragStart(e, columnKey, index), onDragOver: (e) => handleGroupDragOver(e, index), onDrop: (e) => handleGroupDrop(e, index), children: [(0, jsx_runtime_1.jsx)("span", { className: "bf-group-drop-zone__group-label", children: column.label || column.key }), (0, jsx_runtime_1.jsx)("button", { className: "bf-group-drop-zone__group-remove", onClick: () => handleRemoveGroup(columnKey), "aria-label": `Remove ${column.label || column.key} grouping`, children: "\u00D7" })] }, columnKey));
                }), (0, jsx_runtime_1.jsx)("div", { className: "bf-group-drop-zone__drop-target", onDragOver: (e) => handleGroupDragOver(e, activeGroups.length), onDrop: (e) => handleGroupDrop(e, activeGroups.length), children: (0, jsx_runtime_1.jsx)("span", { className: "bf-group-drop-zone__drop-target-text", children: "Drop to add as last group" }) })] })) : ((0, jsx_runtime_1.jsx)("div", { className: "bf-group-drop-zone__placeholder", children: placeholder })) }));
};
exports.GroupDropZone = GroupDropZone;
/**
 * ColumnDragHandle component
 * @param {Object} props - Component props
 * @param {string} props.columnKey - Column key
 * @param {string} props.label - Column label
 * @param {Function} props.onDragStart - Drag start handler
 * @param {Function} props.onDragEnd - Drag end handler
 * @param {string} props.className - Additional CSS classes
 * @returns {React.ReactElement} ColumnDragHandle component
 */
const ColumnDragHandle = ({ columnKey, label, onDragStart, onDragEnd, className = '', ...rest }) => {
    // Drag event handlers
    const handleDragStart = (e) => {
        e.dataTransfer.setData('text/plain', columnKey);
        e.dataTransfer.effectAllowed = 'move';
        if (onDragStart)
            onDragStart(columnKey);
    };
    const handleDragEnd = (e) => {
        if (onDragEnd)
            onDragEnd(columnKey);
    };
    // Classes
    const dragHandleClasses = [
        'bf-column-drag-handle',
        className
    ].filter(Boolean).join(' ');
    return ((0, jsx_runtime_1.jsxs)("div", { className: dragHandleClasses, draggable: true, onDragStart: handleDragStart, onDragEnd: handleDragEnd, title: `Drag to group by ${label || columnKey}`, ...rest, children: [(0, jsx_runtime_1.jsx)("div", { className: "bf-column-drag-handle__icon", children: "\u2261" }), (0, jsx_runtime_1.jsx)("span", { className: "bf-column-drag-handle__label", children: label || columnKey })] }));
};
exports.ColumnDragHandle = ColumnDragHandle;
exports.ColumnDragHandle.propTypes = {
    columnKey: prop_types_1.default.string.isRequired,
    label: prop_types_1.default.string,
    onDragStart: prop_types_1.default.func,
    onDragEnd: prop_types_1.default.func,
    className: prop_types_1.default.string
};
exports.GroupDropZone.propTypes = {
    columns: prop_types_1.default.arrayOf(prop_types_1.default.shape({
        key: prop_types_1.default.string.isRequired,
        label: prop_types_1.default.string
    })),
    groupBy: prop_types_1.default.arrayOf(prop_types_1.default.string),
    onGroupingChange: prop_types_1.default.func.isRequired,
    className: prop_types_1.default.string,
    style: prop_types_1.default.object,
    placeholder: prop_types_1.default.string
};
// Export sub-components
exports.GroupDropZone.ColumnDragHandle = exports.ColumnDragHandle;
exports.default = exports.GroupDropZone;
//# sourceMappingURL=GroupDropZone.js.map