import { st, classes } from './Content.st.css.js';
import React, { useState, useCallback } from 'react';
import Divider from '../../../Divider';
import ScrollableContainer, { AreaY, } from '../../../common/ScrollableContainer';
import { dataHooks } from '../../constants';
import { useBaseModalLayoutContext } from '../../BaseModalLayoutContext';
export const Content = ({ dataHook, className, children, hideTopScrollDivider = false, hideBottomScrollDivider = false, overflowY = 'auto', scrollProps = {}, }) => {
    const { contentClassName, content = children } = useBaseModalLayoutContext();
    const [scrollAreaY, setScrollAreaY] = useState(AreaY.NONE);
    const { onScrollAreaChanged } = scrollProps;
    const hideContentDividers = hideTopScrollDivider && hideBottomScrollDivider;
    const handleScrollAreaChanged = useCallback(({ area, target }) => {
        if (scrollAreaY !== area.y) {
            if (!hideContentDividers) {
                setScrollAreaY(area.y);
            }
            if (onScrollAreaChanged) {
                onScrollAreaChanged({ area, target });
            }
        }
    }, [hideContentDividers, onScrollAreaChanged, scrollAreaY]);
    const isTopDividerHidden = useCallback(() => hideTopScrollDivider ||
        scrollAreaY === AreaY.TOP ||
        scrollAreaY === AreaY.NONE, [hideTopScrollDivider, scrollAreaY]);
    const isBottomDividerHidden = useCallback(() => hideBottomScrollDivider ||
        scrollAreaY === AreaY.BOTTOM ||
        scrollAreaY === AreaY.NONE, [hideBottomScrollDivider, scrollAreaY]);
    const registerToScrollAreaChanges = !hideContentDividers || !!onScrollAreaChanged;
    return ((content && (React.createElement("div", { "data-hook": dataHook, "data-hidedividers": hideContentDividers, style: { overflowY }, className: st(classes.root, {
            hideTopDivider: isTopDividerHidden(),
            hideBottomDivider: isBottomDividerHidden(),
        }, contentClassName, className) },
        !hideTopScrollDivider && React.createElement(Divider, { className: classes.topDivider }),
        React.createElement(ScrollableContainer, { style: { overflowY }, dataHook: dataHooks.contentWrapper, className: classes.innerContent, onScrollAreaChanged: (registerToScrollAreaChanges && handleScrollAreaChanged) ||
                undefined }, content),
        !hideBottomScrollDivider && (React.createElement(Divider, { className: classes.bottomDivider }))))) ||
        null);
};
Content.displayName = 'BaseModalLayout.Content';
//# sourceMappingURL=Content.js.map