import { resetColumnWidth } from '@/lib/calculate';
import { banDrag, fps, recoverDrag } from '@/lib/utils/dom';
import { Store } from '@/lib/store';

export const columnResize = (store: Store) => (columnId: string, eventClientX: number) => {
    let currentClientX = eventClientX;
    const cacheCursor = document.body.style.cursor;
    document.body.style.cursor = 'ew-resize';

    banDrag();

    // 定义 move 方法
    const move = (event: MouseEvent) =>
        fps(() => {
            const targetX = event.clientX;
            const changeWidth = targetX - currentClientX;
            if (changeWidth !== 0) {
                currentClientX = targetX;

                // TODO 接入 operate 列宽修改会存在最小值和最大值，符合最小值和最大值猜允许修改
                const result = resetColumnWidth(store.state.index.columnRecord)(
                    columnId,
                    changeWidth,
                );

                if (!result) return;

                const { columnRecord, columnId2Index, columnId2Field, columnGroupRecord } = result;
                // 变更 column 配置
                store.mutation.setIndexColumnRecord(columnRecord, columnId2Index, columnId2Field);
                store.mutation.setIndexColumnGroup(
                    columnGroupRecord.left,
                    columnGroupRecord.right,
                    columnGroupRecord.scroll,
                );
            }
        });
    document.addEventListener('mousemove', move);
    document.addEventListener('mouseup', () => {
        document.removeEventListener('mousemove', move);
        document.body.style.cursor = cacheCursor;
        recoverDrag();
    });
};