"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.useScrollAnimationDragWithScrollbars = exports.Step = exports.DNDGroupContainer = void 0;
var react_1 = __importStar(require("react"));
var react_custom_scrollbars_1 = require("react-custom-scrollbars");
var react_smooth_dnd_1 = require("react-smooth-dnd");
var useEventListener_1 = require("@devesharp/react-hooks/lib/useEventListener");
exports.DNDGroupContainer = react_1.default.memo(function DNDGroupContainer(props) {
    var onChange = props.onChange, items = props.items;
    function onDrop() { }
    function onDragStart() { }
    function onDragEnd() { }
    return (react_1.default.createElement(react_1.default.Fragment, null, items.map(function (step, stepIndex) { return (react_1.default.createElement(Step, { key: "step-".concat(step.id), index: stepIndex, step: step, onDrop: onDrop, enableAutoScroll: true, onDragStart: onDragStart, onDragEnd: onDragEnd })); })));
});
function Step(_a) {
    var id = _a.id, index = _a.index, groupName = _a.groupName, step = _a.step, onDrop = _a.onDrop, onDragStart = _a.onDragStart, onDragEnd = _a.onDragEnd, renderCard = _a.renderCard;
    var ScrollbarsRef = (0, react_1.useRef)(null);
    var _b = (0, react_1.useState)(false), enableAutoScroll = _b[0], setEnableAutoScroll = _b[1];
    useScrollAnimationDragWithScrollbars(ScrollbarsRef, enableAutoScroll);
    function _onDrop(e, i) {
        if (onDrop)
            onDrop(e, i);
    }
    function _onDragStart() {
        setEnableAutoScroll(true);
        if (onDragStart)
            onDragStart();
    }
    function _onDragEnd() {
        setEnableAutoScroll(false);
        if (onDragEnd)
            onDragEnd();
    }
    return (react_1.default.createElement(react_custom_scrollbars_1.Scrollbars, { className: "steps-card-listing--inner", autoHide: true, ref: ScrollbarsRef },
        react_1.default.createElement(react_smooth_dnd_1.Container, { groupName: groupName, onDrop: function (e) { return _onDrop(e, index); }, onDragStart: function () { return _onDragStart(); }, onDragEnd: function () { return _onDragEnd(); }, animationDuration: 200, getChildPayload: function (i) { return step.items[i]; }, dropPlaceholder: {
                animationDuration: 150,
                showOnTop: true,
                className: 'drop-preview',
            }, autoScrollEnabled: false, dragClass: "card-ghost", dropClass: "card-ghost-drop" }, step.items.map(function (lead, leadIndex) { return (react_1.default.createElement(react_smooth_dnd_1.Draggable, { key: lead.id }, renderCard(lead))); }))));
}
exports.Step = Step;
function useScrollAnimationDragWithScrollbars(ref, enabled) {
    if (enabled === void 0) { enabled = false; }
    var lastTime = (0, react_1.useRef)(Date.now());
    var moveX = (0, react_1.useRef)(false);
    var factorX = (0, react_1.useRef)(0);
    var factorY = (0, react_1.useRef)(0);
    var borderFactor = 0.1;
    (0, useEventListener_1.useEventListener)('mousemove', function (ev) {
        var mouseX = ev.clientX;
        var mouseY = ev.clientY;
        var offsetLeft = ref.current.container.getBoundingClientRect().x;
        var offsetTop = ref.current.container.getBoundingClientRect().y;
        var width = ref.current.getClientWidth();
        var height = ref.current.getClientHeight();
        if (offsetLeft + width * 0.1 > mouseX) {
            var factor = 1 - (mouseX - offsetLeft) / (width * 0.1);
            factor = factor > 1 ? 1 : factor;
            factor = factor < 0 ? 0 : factor;
            factorX.current = -factor;
        }
        else if (mouseX > offsetLeft + width - width * 0.1) {
            var factor = 1 - (offsetLeft + width - mouseX) / (width * 0.1);
            factor = factor > 1 ? 1 : factor;
            factor = factor < 0 ? 0 : factor;
            factorX.current = factor;
        }
        else {
            factorX.current = 0;
        }
        if (mouseX >= offsetLeft && mouseX <= offsetLeft + width) {
            if (offsetTop + height * 0.1 > mouseY) {
                var factor = 1 - (mouseY - offsetTop) / (height * 0.1);
                factor = factor > 1 ? 1 : factor;
                factor = factor < 0 ? 0 : factor;
                factorY.current = -factor;
            }
            else if (mouseY > offsetTop + height - height * 0.1) {
                var factor = 1 - (offsetTop + height - mouseY) / (height * 0.1);
                factor = factor > 1 ? 1 : factor;
                factor = factor < 0 ? 0 : factor;
                factorY.current = factor;
            }
            else {
                factorY.current = 0;
            }
        }
    });
    (0, react_1.useEffect)(function () {
        if (enabled) {
            lastTime.current = Date.now();
            var interval_1 = setInterval(function () {
                var timeLapse = Date.now() - lastTime.current;
                lastTime.current = Date.now();
                var animationSize = (timeLapse / 1000) * 500;
                if (factorX.current) {
                    ref.current.scrollLeft(ref.current.getScrollLeft() + factorX.current * animationSize);
                }
                if (factorY.current) {
                    ref.current.scrollTop(ref.current.getScrollTop() + factorY.current * animationSize);
                }
            }, 50);
            return function () { return clearInterval(interval_1); };
        }
    }, [enabled]);
}
exports.useScrollAnimationDragWithScrollbars = useScrollAnimationDragWithScrollbars;
//# sourceMappingURL=DNDGroupContainer.js.map