import { banDrag, fps, getElementByRole, recoverDrag } from '@/lib/utils/dom';
import { BODY_CELL } from '@/lib/constants/dom-role';
import { CalculatingOperator } from '@/lib/operator/CalculatingOperator';
import {log} from "@/lib/utils/log";

/**
 * 根据拖拽区域计算填充内容
 * 0. UI 展示区域，下和右二选一
 * 1. 计算出目前选中区域的二维数组（拖拽完成）
 * 2. 识别二维数组的特征（拖拽完成）
 * 3. 识别填充区域的需求量 (拖拽完成)
 * 4. 分配填充区域的值 (拖拽完成)
 * 注意：
 * 1. 此处计算时只能向下或者向右，不能斜向
 * @param calculatingOperator
 */
export const dragCalculate =
    (calculatingOperator: CalculatingOperator) => (beginColumnId: string, beginRowId: string) => {
        banDrag();
        // 获取目前 Selection 区域4端点
        calculatingOperator.initCalculating(beginRowId, beginColumnId);

        const move = (event: MouseEvent) =>
            fps(() => {
                const cell = getElementByRole(event.target as Element, BODY_CELL);
                if (!cell) return;
                log('[event][dragCalculate] move');
                const currentColumnId = cell.getAttribute('column-id');
                const currentRowId = cell.getAttribute('row-id');

                calculatingOperator.dragging(currentColumnId, currentRowId);
            });

        const moveFinish = () => {
            document.removeEventListener('mousemove', move);
            document.removeEventListener('mouseup', moveFinish);

            calculatingOperator.calculate();

            recoverDrag();
        };
        document.addEventListener('mousemove', move);
        document.addEventListener('mouseup', moveFinish);
    };