import React, { useCallback } from 'react';
import classNames from 'classnames';
import s from './DragSorted.less';

const DragSorted = (props: any) => {
    const { className, style, columnConfig, onDropFinish, onScroll } = props;
    // 表格
    const container: any = document.querySelector('#tableContainer');
    // 拖拽列时的影子div
    const columnCopyDiv: any = document.querySelector('#columnCopyDiv');
    // 分割线wrap
    const dividerWrap: any = document.querySelector('#dividerWrap');
    // 分割线
    const divider: any = document.querySelector('#divider');
    // 左侧固定列分割线
    const leftFixedHandleWrap: any = document.querySelector('#leftFixedHandleWrap');
    // ? 拖动目标事件
    // 开始拖动
    const onDragStart = useCallback((e) => {
        // 表格初始位置x点
        const originLeft = container.getBoundingClientRect().x || 0;
        // 拖动列矩形
        const targetRect = e.target.getBoundingClientRect();
        // 影子div显示
        columnCopyDiv.style.display = 'block';
        // 影子div初始x位置=拖动列x点-表格x点
        columnCopyDiv.style.left = `${targetRect.x - originLeft}px`;
        // 影子div宽度=拖动列宽度
        columnCopyDiv.style.width = `${targetRect.width}px`;
        // 鼠标x点与拖动列x点之间的距离（记录下来方便后续使用）
        const detaX = e.clientX - targetRect.x;
        columnCopyDiv.setAttribute('data-deta-x', detaX);
        // 将拖动列信息加入拖拽事件dataTransfer中，方便后续使用
        e.dataTransfer.setData('dragColumn', JSON.stringify(columnConfig));
        // debugger

        divider.style.left = `${targetRect.x - originLeft}px`;
        dividerWrap.style.display = 'block';
    }, [columnConfig.columnName]);
    // 拖动中
    const onDragUpdate = useCallback((e) => {
        // 拖动列矩形
        const targetRect = e.target.getBoundingClientRect();
        const tableRect = container.getBoundingClientRect();
        const detaX = columnCopyDiv.getAttribute('data-deta-x');
        const left = e.clientX - tableRect.x - detaX;
        console.log('left: ', left);
        // 影子div随鼠标移动
        columnCopyDiv.style.left = `${left}px`;
    }, []);
    // 停止拖动
    const onDragEnd = useCallback((e) => {
        // 停止拖动时隐藏影子div
        columnCopyDiv.style.display = 'none';
        dividerWrap.style.display = 'none';
        console.log('stop: ');
    }, []);
    // ? 投放目标事件
    // 在投放目标中移动
    const onDragOver = useCallback((e) => {
        const tableRect = container.getBoundingClientRect();
        const targetRect = e.target.getBoundingClientRect();
        const columnCopyDivRect = columnCopyDiv.getBoundingClientRect();
        const leftFixedHandleWrapRect = leftFixedHandleWrap.getBoundingClientRect();
        const targetWidth = targetRect.width;
        const targetX = targetRect.x;
        const columnCopyDivWidth = columnCopyDivRect.width;
        const columnCopyDivX = columnCopyDivRect.x;
        // 影子div中间点的x坐标
        const columnCopyDivMid = columnCopyDivX + (columnCopyDivWidth / 2);
        if (columnCopyDivMid > targetX && columnCopyDivMid < targetX + targetWidth) {
            // 影子div中点在投放目标中
            divider.style.left = `${targetRect.x - tableRect.x}px`;
        }
        if (typeof onScroll === 'function') {
            if (e.clientX > tableRect.right - 30) {
                onScroll('right', 100);
            } else if (e.clientX > tableRect.right - 100) {
                onScroll('right', 10);
            } else if (e.clientX < leftFixedHandleWrapRect.x + 100) {
                onScroll('left', 10);
            } else if (e.clientX < leftFixedHandleWrapRect.x + 30) {
                onScroll('left', 100);
            }
        }

        // 元素默认是不能够投放，需在目标元素的dragover事件中取消默认事件
        var event = e || window.event;
        event.preventDefault()
    }, []);
    // 在投放目标中松开鼠标
    const onDrop = useCallback((e) => {
        const targetRect = e.target.getBoundingClientRect();
        const columnCopyDivRect = columnCopyDiv.getBoundingClientRect();
        const targetWidth = targetRect.width;
        const targetX = targetRect.x;
        const columnCopyDivWidth = columnCopyDivRect.width;
        const columnCopyDivX = columnCopyDivRect.x;
        // 影子div中间点的x坐标
        const columnCopyDivMid = columnCopyDivX + (columnCopyDivWidth / 2);
        if (columnCopyDivMid > targetX && columnCopyDivMid < targetX + targetWidth) {
            // 影子div中点在投放目标中
            try {
                const dragColumn = JSON.parse(e.dataTransfer.getData('dragColumn'));
                const dropColumn = columnConfig;
                if (typeof onDropFinish === 'function') {
                    onDropFinish(dragColumn, dropColumn);
                }
            } catch (e) {
                console.error('json解析失败')
            }
        }
    }, [columnConfig.columnName]);


    return (
        <div
            className={classNames(s.draggableDiv, className)}
            style={style}
            draggable={true}
            onDragStart={onDragStart}
            onDrag={onDragUpdate}
            onDragEnd={onDragEnd}
            onDragOver={onDragOver}
            onDrop={onDrop}
        >
            {props.children}
        </div>
    );
};
export default DragSorted;