import { getElementByRole } from '@/lib/utils/dom';
import { BODY_CELL } from '@/lib/constants/dom-role';
import { nextTick } from '@vue/composition-api';
import { RIGHT_MENU_SHADOW_PX_BUFFER } from '@/lib/constants/dom-buffer';
import { Store } from '@/lib/store';

/**
 * 激活单元格
 * @param e
 * @param store
 * 1.销毁选择区域
 * 2.销毁原始的右键菜单
 * 3.激活单元格
 */
export const activeBodyCell = (e: PointerEvent, store: Store) => {
    const cellElement = getElementByRole(e.target as Element, BODY_CELL);
    if (cellElement) {
        store.mutation.inactiveRightMenu();
        const rowId = cellElement.getAttribute('row-id');
        const columnId = cellElement.getAttribute('column-id');
        const pin = store.state.index.columnRecord[columnId].pin;
        store.mutation.destroySelecting();
        store.mutation.clickedBodyCell(pin, rowId, columnId);
    }
};

/**
 * 编辑单元格
 * @param e
 * @param store
 */
export const editBodyCell = (e: PointerEvent, store: Store) => {
    const cellElement = getElementByRole(e.target as Element, BODY_CELL);
    if (cellElement) {
        const rowId = cellElement.getAttribute('row-id');
        const columnId = cellElement.getAttribute('column-id');
        const pin = store.state.index.columnRecord[columnId].pin;
        store.mutation.dbClickedBodyCell(pin, rowId, columnId);
    }
};

/**
 * 右键菜单唤起
 * @param e
 * @param store
 * @param getGridDom
 * @param getMenuDom
 */
export const activeRightMenu = async (
    e: PointerEvent,
    store: Store,
    getGridDom: () => Element,
    getMenuDom: () => Element,
) => {
    const girdElement = getGridDom();

    store.mutation.inactiveRightMenu();
    const bodyLocation = girdElement.getBoundingClientRect();
    const scrollTop = girdElement.scrollTop;
    const scrollLeft = girdElement.scrollLeft;
    // 弹窗位置
    const targetY = e.clientY - bodyLocation.y + scrollTop;
    const targetX = e.clientX - bodyLocation.x + scrollLeft;
    store.mutation.activeRightMenu(targetY, targetX);

    await nextTick();
    // 弹窗自身宽高
    const menuElement = getMenuDom();

    const menuHeight = menuElement.clientHeight;
    const menuWidth = menuElement.clientWidth;
    // 视图边界 X
    const maxY = scrollTop + girdElement.clientHeight;
    const maxX = scrollLeft + girdElement.clientWidth;
    // 视图边界 Y
    store.mutation.activeRightMenu(
        Math.min(targetY, maxY - menuHeight - RIGHT_MENU_SHADOW_PX_BUFFER),
        Math.min(targetX, maxX - menuWidth - RIGHT_MENU_SHADOW_PX_BUFFER),
    );
};