import journey_wrapper from "../types/wrapper";

var nav = {
    scrollInterval: 0,
    scrollDir: 'none',
};


const sideScroll = function (element: Element, direction: 'left' | 'right' | 'none', speed: number = 25, step: number = 15) {
    nav.scrollDir = direction
    if (direction == 'none') return;
    (nav as any).scrollInterval = setInterval(() => {
        element.scrollLeft += (direction == 'left') ? -step : step;
    }, speed);
}

export const focus_leg = function (journey: journey_wrapper, idx: number | null = null) {
    const c = document.querySelector('.scroll-content.nav-leg')!!
    const item = c.children[(idx != null ? idx : journey.sel_leg) + 1];
    c.scrollLeft = (item as any).offsetLeft + ((item as any).offsetWidth / 2) - (c as any).offsetWidth / 2
}

export const focus_day = function (journey: journey_wrapper, idx: number | null = null) {
    const c = document.querySelector('.scroll-content.nav-day')!!
    const item = c.children[(idx != null ? idx : journey.sel_day) + 1];
    c.scrollLeft = (item as any).offsetLeft + ((item as any).offsetWidth / 2) - (c as any).offsetWidth / 2;
}

export const nav_mousemove = function (e: PointerEvent) {
    if (e.pointerType != 'mouse') return;
    const c = (e.target as any).closest('.scroll-content') || (e.target as any).firstChild;
    const left = e.pageX - c.getBoundingClientRect().left;
    const newDir =
        left < c.offsetWidth * 0.1 ? 'left' :
            (left > c.offsetWidth * 0.9 ? 'right' : 'none')
    if (!nav.scrollInterval || nav.scrollDir != newDir) {
        if (nav.scrollInterval) clearInterval(nav.scrollInterval)
        sideScroll(c, newDir);
    }
}
export const nav_mouseleave = function (_e: PointerEvent) {
    clearInterval(nav.scrollInterval);
    nav.scrollDir = 'none'
    nav.scrollInterval = 0
}