/**
 * @copyright 2009-2019 Vanilla Forums Inc.
 * @license GPL-2.0-only
 */
import { forceRenderStyles } from "typestyle";
import { useScrollOffset } from "@library/layout/ScrollOffsetContext";
import { useEffect } from "react";
import { initAllUserContent } from "@library/content/index";

/**
 * Hook for handling hash scrolling and user content rendering.
 *
 * @param content The content being displayed. Pass this to refresh the content when filled.
 * @param disabled Whether or not hash scrolling is disabled.
 */
export function useHashScrolling(content: string, disabled?: boolean) {
    const { temporarilyDisabledWatching, getCalcedHashOffset } = useScrollOffset();
    const calcedOffset = getCalcedHashOffset();

    useEffect(() => {
        if (disabled) {
            return;
        }
        void initAllUserContent().then(() => {
            initHashScrolling(calcedOffset, () => temporarilyDisabledWatching(500));
        });
    }, [calcedOffset, temporarilyDisabledWatching, disabled, content]);
}

export function initHashScrolling(offset: number = 0, beforeScrollHandler?: () => void) {
    /**
     * Scroll to the window's current hash value.
     */
    const scrollToHash = (event?: HashChangeEvent) => {
        event && event.preventDefault();

        const targetID = window.location.hash.replace("#", "");
        const element =
            (document.querySelector(`[data-id="${targetID}"]`) as HTMLElement) || document.getElementById(targetID);
        if (element) {
            forceRenderStyles();
            beforeScrollHandler && beforeScrollHandler();
            setTimeout(() => {
                const top = window.pageYOffset + element.getBoundingClientRect().top - offset;
                window.scrollTo({ top, behavior: "smooth" });
            }, 10);
        }
    };

    scrollToHash();

    window.addEventListener("hashchange", scrollToHash);
    return () => {
        window.removeEventListener("hashchange", scrollToHash);
    };
}
