import { useContext, useEffect, useRef } from 'react';
import { DashboardContext } from '../../../DashboardContext';
import { PAGE_CONTENT_ANIMATION, pageContentClassnames, } from '../../../PageContent/constants';
export const useLogic = () => {
    const { isFocusedMode, setAlertElement } = useContext(DashboardContext);
    const prevFocusedModeRef = useRef(isFocusedMode);
    const alertContainerRef = useRef(null);
    const elementRef = useRef(null);
    useEffect(() => {
        setAlertElement?.(alertContainerRef.current ?? null);
        return () => setAlertElement?.(null);
    }, [setAlertElement]);
    useEffect(() => {
        if (isFocusedMode || (prevFocusedModeRef.current && !isFocusedMode)) {
            elementRef.current = document.querySelector(`.${pageContentClassnames.pageContent}`);
            elementRef.current?.classList.add(pageContentClassnames.animation);
        }
    }, [isFocusedMode]);
    const onAnimationEnd = (event) => {
        if (event.animationName === PAGE_CONTENT_ANIMATION) {
            elementRef.current?.classList.remove(pageContentClassnames.animation);
            prevFocusedModeRef.current = isFocusedMode;
        }
    };
    return { onAnimationEnd, alertContainerRef };
};
