/**
 * @license MIT
 * author: Cube Dev Team
 * @cube-dev/ui-kit v0.0.0-canary-e980ce7
 * Released under the MIT license.
 */

import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { forwardRef, useMemo, useRef, } from 'react';
import { useHover } from 'react-aria';
import { extractStyles, filterBaseProps, INNER_STYLES, mergeStyles, OUTER_STYLES, tasty, } from '../../../tasty/index.js';
import { useCombinedRefs } from '../../../utils/react/index.js';
import { useTinyScrollbar } from './hooks/useTinyScrollbar.js';
import { LayoutContextReset } from './LayoutContext.js';
const ContentElement = tasty({
    as: 'div',
    qa: 'LayoutContent',
    styles: {
        container: 'content / inline-size',
        position: 'relative',
        display: 'grid',
        gridColumns: '1sf',
        gridRows: '1sf',
        placeContent: 'stretch',
        placeItems: 'stretch',
        placeSelf: 'stretch',
        flexGrow: 1,
        flexShrink: 1,
        height: 'min 0',
        overflow: 'hidden',
        boxSizing: 'content-box',
        border: {
            '': 0,
            '!:last-child': '($layout-border-size, 1bw) solid #border bottom',
        },
        Inner: {
            $: '>',
            display: 'flex',
            flow: 'column',
            padding: '($content-padding, 1x)',
            overflow: {
                '': 'auto',
                'scrollbar=none': 'clip',
            },
            placeSelf: 'stretch',
            scrollbar: {
                '': 'thin',
                'scrollbar=tiny | scrollbar=none': 'none',
            },
            '$layout-border-size': '0',
        },
        // Custom scrollbar handles (when scrollbar="tiny")
        ScrollbarV: {
            $: '>',
            position: 'absolute',
            right: '1px',
            top: '$scrollbar-v-top',
            width: '1ow',
            height: '$scrollbar-v-height',
            radius: 'round',
            fill: '#dark.35',
            opacity: {
                '': 0,
                '(focused | scrolling) & scrollbar=tiny': 1,
            },
            transition: 'opacity 0.15s',
            pointerEvents: 'none',
        },
        ScrollbarH: {
            $: '>',
            position: 'absolute',
            bottom: '1px',
            left: '$scrollbar-h-left',
            height: '1ow',
            width: '$scrollbar-h-width',
            radius: 'round',
            fill: '#dark.35',
            opacity: {
                '': 0,
                '(focused | scrolling) & scrollbar=tiny': 1,
            },
            transition: 'opacity 0.15s',
            pointerEvents: 'none',
        },
    },
});
function LayoutContent(props, ref) {
    const { children, scrollbar = 'thin', styles, mods: externalMods, innerRef: innerRefProp, innerProps, ...otherProps } = props;
    const outerStyles = extractStyles(otherProps, OUTER_STYLES);
    const innerStyles = extractStyles(otherProps, INNER_STYLES);
    const internalInnerRef = useRef(null);
    const combinedInnerRef = useCombinedRefs(innerRefProp, internalInnerRef);
    const combinedRef = useCombinedRefs(ref);
    const isTinyScrollbar = scrollbar === 'tiny';
    const { hoverProps, isHovered } = useHover({});
    const { handleVStyle, handleHStyle, hasOverflowY, hasOverflowX, isScrolling, } = useTinyScrollbar(internalInnerRef, isTinyScrollbar);
    const scrollbarStyle = useMemo(() => {
        if (!isTinyScrollbar)
            return {};
        return {
            ...handleVStyle,
            ...handleHStyle,
        };
    }, [isTinyScrollbar, handleVStyle, handleHStyle]);
    const mods = useMemo(() => ({
        ...externalMods,
        scrollbar,
        hovered: isHovered,
        scrolling: isScrolling,
    }), [externalMods, scrollbar, isHovered, isScrolling]);
    // Merge styles: outer styles to root, inner styles to Inner element
    const finalStyles = useMemo(() => {
        return mergeStyles(styles, outerStyles, innerStyles ? { Inner: innerStyles } : null);
    }, [styles, outerStyles, innerStyles]);
    return (_jsxs(ContentElement, { ref: combinedRef, ...filterBaseProps(otherProps, { eventProps: true }), ...hoverProps, mods: mods, styles: finalStyles, style: scrollbarStyle, children: [_jsx("div", { ref: combinedInnerRef, "data-element": "Inner", ...innerProps, children: _jsx(LayoutContextReset, { children: children }) }), isTinyScrollbar && hasOverflowY && _jsx("div", { "data-element": "ScrollbarV" }), isTinyScrollbar && hasOverflowX && _jsx("div", { "data-element": "ScrollbarH" })] }));
}
const _LayoutContent = forwardRef(LayoutContent);
_LayoutContent.displayName = 'Layout.Content';
export { _LayoutContent as LayoutContent };

        