import React, { useEffect, useRef, useState } from 'react';
import { useToolbarCollectionContext } from '../ToolbarCollectionContext';
import { observer } from 'mobx-react-lite';
import { ScrollableContentContext, useScrollableContentContext, } from '../../providers';
function _ToolbarCollectionContentAutoSizer(props) {
    const { children } = props;
    const { scrollableContentRef } = useScrollableContentContext();
    const internalScrollableContentRef = useRef(null);
    const [scrollableContentContextValue] = useState(() => ({
        scrollableContentRef: internalScrollableContentRef,
    }));
    const toolbar = useToolbarCollectionContext();
    const { internalScroll, collection } = toolbar;
    useEffect(() => {
        return toolbar.itemsContentRect.init({
            scrollElement: scrollableContentRef.current,
        });
    }, []);
    let child = (React.createElement("div", { "data-hook": "toolbar-collection-content-auto-sizer", style: {
            height: '100%',
            width: '100%',
            overflowY: internalScroll ? 'auto' : undefined,
            overflowAnchor: 'none',
        }, ref: (el) => {
            toolbar.itemsContentRect.element = el;
            if (internalScroll) {
                internalScrollableContentRef.current = el;
                collection.scrollableContent = el;
            }
        } }, children));
    if (internalScroll) {
        child = (React.createElement(ScrollableContentContext.Provider, { value: scrollableContentContextValue }, child));
    }
    return child;
}
export const ToolbarCollectionContentAutoSizer = observer(_ToolbarCollectionContentAutoSizer);
//# sourceMappingURL=ToolbarCollectionContentAutoSizer.js.map