import { useContext, useEffect } from 'react';
import { DashboardSidebarContext } from '../../../../DashboardSidebarProvider';
import { navMenuItemButtonClassnames } from '../../../../NavMenu';
import { useViewportType } from '../../../../useViewportType';
import { sidebarNavClassnames } from '../../../SidebarNav';
export const useCloseSidebarOnMobile = () => {
    const { isMobile } = useViewportType();
    const { collapsedIn, onToggleSidebar } = useContext(DashboardSidebarContext);
    const handleMenuListItemClick = () => {
        onToggleSidebar(false);
    };
    useEffect(() => {
        if (!isMobile || !collapsedIn) {
            return;
        }
        const sidebarNavElement = document.querySelector(`.${sidebarNavClassnames.root}`);
        if (!sidebarNavElement) {
            return;
        }
        const listItems = sidebarNavElement.querySelectorAll(`.${navMenuItemButtonClassnames.root}:not(.${navMenuItemButtonClassnames.hasGroup})`);
        listItems.forEach((item) => {
            item.addEventListener('click', handleMenuListItemClick);
        });
        return () => {
            listItems.forEach((item) => {
                item.removeEventListener('click', handleMenuListItemClick);
            });
        };
    }, [isMobile, collapsedIn]);
};
