import { useEffect, useLayoutEffect, useMemo, useRef, } from 'react';
import { pageLayoutClassnames } from '../../../../PageLayoutContainer/constants';
import { useViewportType } from '../../../../useViewportType';
import { DEFAULT_MOBILE_SKELETON_ROWS_COUNT } from '../../../constants';
export const useDataGridMobileLogic = ({ containerRef, isLoading, columns, rows, isNoScrollToTop = false, }) => {
    const { isMobile } = useViewportType();
    const firstLoadedRowsCountRef = useRef(null);
    const mobileSkeletonCellsCount = useMemo(() => columns?.filter((column) => !column.isHideOnMobile).length ?? 0, [columns]);
    useEffect(() => {
        if (!isLoading &&
            rows &&
            rows.length > 0 &&
            firstLoadedRowsCountRef.current === null) {
            firstLoadedRowsCountRef.current = rows.length;
        }
    }, [rows, isLoading]);
    useLayoutEffect(() => {
        if (!isMobile || isNoScrollToTop) {
            return;
        }
        if (isLoading && containerRef?.current) {
            const pageLayout = containerRef.current.closest(`.${pageLayoutClassnames.root}`);
            if (pageLayout) {
                pageLayout.scrollTo({
                    top: 0,
                    behavior: 'instant',
                });
            }
        }
    }, [containerRef, isLoading, isMobile, isNoScrollToTop]);
    const mobileSkeletonProps = {
        cellsCount: mobileSkeletonCellsCount,
        rowsCount: firstLoadedRowsCountRef.current ?? DEFAULT_MOBILE_SKELETON_ROWS_COUNT,
    };
    return { isMobile, mobileSkeletonProps };
};
