"use strict";
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    var desc = Object.getOwnPropertyDescriptor(m, k);
    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
      desc = { enumerable: true, get: function() { return m[k]; } };
    }
    Object.defineProperty(o, k2, desc);
}) : (function(o, m, k, k2) {
    if (k2 === undefined) k2 = k;
    o[k2] = m[k];
}));
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
    Object.defineProperty(o, "default", { enumerable: true, value: v });
}) : function(o, v) {
    o["default"] = v;
});
var __importStar = (this && this.__importStar) || function (mod) {
    if (mod && mod.__esModule) return mod;
    var result = {};
    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
    __setModuleDefault(result, mod);
    return result;
};
Object.defineProperty(exports, "__esModule", { value: true });
exports.DndComponent = void 0;
var core_1 = require("@dnd-kit/core");
var react_1 = __importStar(require("react"));
var react_dom_1 = require("react-dom");
var types_1 = require("../../types");
var DndMeasurer_1 = require("../DndMeasurer");
var TableColumnDragPreview_1 = require("../TableColumnDragPreview");
var TableRowDragPreview_1 = require("../TableRowDragPreview");
var helpers_1 = require("./helpers");
var styles_1 = require("./styles");
var DndComponent = function (_a) {
    var _b, _c;
    var children = _a.children, containerRef = _a.containerRef, onMoveColumn = _a.onMoveColumn, onDropColumn = _a.onDropColumn, onMoveRow = _a.onMoveRow, onDropRow = _a.onDropRow, columnsId = _a.columnsId, rowsId = _a.rowsId, tableClassName = _a.tableClassName;
    var styles = (0, styles_1.useStyles)();
    var containerHeight = (_b = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _b === void 0 ? void 0 : _b.clientHeight;
    var containerWidth = (_c = containerRef === null || containerRef === void 0 ? void 0 : containerRef.current) === null || _c === void 0 ? void 0 : _c.clientWidth;
    var _d = (0, react_1.useState)(null), draggingType = _d[0], setDraggingType = _d[1];
    var _e = (0, react_1.useState)(null), draggingColumn = _e[0], setDraggingColumn = _e[1];
    var _f = (0, react_1.useState)(null), draggingRow = _f[0], setDraggingRow = _f[1];
    var onDragStart = (0, react_1.useCallback)(function (event) {
        var _a, _b;
        var dndData = (_b = (_a = event.active) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current;
        if (dndData) {
            setDraggingType(dndData === null || dndData === void 0 ? void 0 : dndData.type);
        }
        if ((dndData === null || dndData === void 0 ? void 0 : dndData.type) === types_1.DndItemTypes.Column) {
            setDraggingColumn(dndData);
        }
        if ((dndData === null || dndData === void 0 ? void 0 : dndData.type) === types_1.DndItemTypes.Row) {
            setDraggingRow(dndData);
        }
    }, []);
    var onDragEnd = (0, react_1.useCallback)(function (event) {
        var _a, _b, _c;
        var draggingType = (_c = (_b = (_a = event.active) === null || _a === void 0 ? void 0 : _a.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.type;
        setDraggingType(null);
        setDraggingColumn(null);
        setDraggingRow(null);
        if (draggingType === types_1.DndItemTypes.Column) {
            onDropColumn();
        }
        if (draggingType === types_1.DndItemTypes.Row) {
            onDropRow();
        }
    }, [onDropColumn, onDropRow]);
    var modifiers = (0, react_1.useMemo)(function () {
        switch (draggingType) {
            case types_1.DndItemTypes.Column:
                return [helpers_1.columnMoveModifier];
            case types_1.DndItemTypes.Row:
                return [helpers_1.rowMoveModifier];
            default:
                return [];
        }
    }, [draggingType]);
    var onDragOver = (0, react_1.useCallback)(function (_a) {
        var _b, _c;
        var active = _a.active, over = _a.over;
        if (active.id === (over === null || over === void 0 ? void 0 : over.id))
            return;
        switch ((_c = (_b = active === null || active === void 0 ? void 0 : active.data) === null || _b === void 0 ? void 0 : _b.current) === null || _c === void 0 ? void 0 : _c.type) {
            case types_1.DndItemTypes.Column:
                return onMoveColumn(active.id, over === null || over === void 0 ? void 0 : over.id);
            case types_1.DndItemTypes.Row:
                return onMoveRow(active.id, over === null || over === void 0 ? void 0 : over.id);
        }
    }, [onMoveColumn, onMoveRow]);
    var dragOverlayStyle = (0, react_1.useMemo)(function () {
        var _a;
        var containerRect = (_a = containerRef.current) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
        switch (draggingType) {
            case types_1.DndItemTypes.Column:
                return {
                    top: containerRect.top,
                    width: 'auto',
                    height: 'auto'
                };
            case types_1.DndItemTypes.Row:
                return {
                    left: containerRect.left,
                    width: 'auto',
                    height: 'auto'
                };
            default:
                return {};
        }
    }, [containerRef, draggingType]);
    var mouseSensor = (0, core_1.useSensor)(core_1.MouseSensor);
    var sensors = (0, core_1.useSensors)(mouseSensor);
    return (react_1.default.createElement(core_1.DndContext, { sensors: sensors, collisionDetection: core_1.closestCenter, onDragStart: onDragStart, onDragEnd: onDragEnd, onDragOver: onDragOver },
        children,
        draggingType && (0, react_dom_1.createPortal)(react_1.default.createElement("div", { className: styles.backDrop }), document.body),
        react_1.default.createElement(DndMeasurer_1.DndMeasurer, { columnsId: columnsId, rowsId: rowsId }),
        (0, react_dom_1.createPortal)(react_1.default.createElement(core_1.DragOverlay, { dropAnimation: null, style: dragOverlayStyle, modifiers: modifiers },
            react_1.default.createElement(TableColumnDragPreview_1.TableColumnDragPreview, { columnHeight: containerHeight, draggingColumn: draggingColumn }),
            react_1.default.createElement(TableRowDragPreview_1.TableRowDragPreview, { tableWidth: containerWidth, draggingRow: draggingRow, tableClassName: tableClassName })), document.body)));
};
exports.DndComponent = DndComponent;
