import { times } from 'lodash';

export const getElementByRole = (element: Element, role: string): Element => {
    if (!element) return null;
    if (element.getAttribute('role') === role) {
        return element;
    } else {
        return getElementByRole(element.parentElement, role);
    }
};

export const flexWidth = (width: number) => ({
    width,
    'min-width': width,
    'max-width': width,
});

export const banDrag = () => {
    document.onselectstart = () => false;
    document.ondragstart = () => false;
};

export const recoverDrag = () => {
    document.onselectstart = null;
    document.ondragstart = null;
};

export const fps = (fn: FrameRequestCallback) => window.requestAnimationFrame(fn);

export const timeout = (cb: () => void, time: number) =>
    new Promise((resolve) => setTimeout(() => resolve(cb()), time));

export const fpsPromise = <T>(fn: () => T) =>
    new Promise((resolve) => {
        window.requestAnimationFrame(() => {
            resolve(fn());
        });
    });

export const runByFps = (count: number) => async (fb: () => void) => {
    for (let i = 0; i < count; i++) {
        await fpsPromise(fb);
    }
    times(count).forEach(() => fps(fb));
};

export const fixStyle = (styleObject: {
    top?: number;
    width?: number;
    height?: number;
    left?: number;
    transform?: number;
    'line-height'?: number;
}) => {
    const result: Record<string, string> = {};
    Object.keys(styleObject).forEach((itm) => {
        if (itm === 'transform') {
            result[itm] = `translateY(${styleObject[itm]}px)`;
        } else {
            // TODO
            // @ts-ignore
            result[itm] = `${styleObject[itm]}px`;
        }
    });
    return result;
};

export const getElementCenterPoint = (element: Element) => {
    const { top, left, width, height } = element.getBoundingClientRect();
    return {
        x: left + width / 2,
        y: top + height / 2,
    };
};