/* @oracle/oraclejet-preact: undefined */
'use strict';

var hooks = require('preact/hooks');
var useColorScheme = require('./useColorScheme-b4de9e67.js');
var useScale = require('./useScale-779458a9.js');
var theme = require('./theme-dfd6a9fe.js');
var mergeInterpolations = require('./mergeInterpolations-6727b536.js');
var LayerHost = require('./LayerHost-8ec73638.js');
var Theme = require('./Theme-f06687af.js');
var useDensity = require('./useDensity-301606ec.js');

// This hook encapsulates the logic required to determine which theme style classes are needed
// for the current environment context's colorScheme, density, and scale value.  This would be used when
// rendering dom outside of the current dom tree, but desire to match the colorScheme, density, and scale
// of the original dom tree.
function useThemeInterpolations(logicalParentRef) {
    const [colorScheme, setColorScheme] = hooks.useState(undefined);
    const currentColorScheme = useColorScheme.useColorScheme();
    const currentDensity = useDensity.useDensity();
    const currentScale = useScale.useScale();
    // We don't want to interpolate the default environment values for scale or density. Those should get picked up by default.
    // This fixes an issue for core pack components that utilize the Layer component, when in a legacy cookbook page.
    const density = currentDensity !== LayerHost.DefaultEnvironment.density ? currentDensity : undefined;
    const scale = currentScale !== LayerHost.DefaultEnvironment.scale ? currentScale : undefined;
    // We want to use useLayoutEffect instead of useEffect here. Otherwise there could be
    // flashing due to light colorScheme initial render then dark colorScheme after useEffect.
    hooks.useLayoutEffect(() => {
        // for colorScheme in Legacy, things are a bit more complicated because unlike scale which is always applied to
        // the root dom element, we can switch to dark theme by adding the .oj-color-invert class to any dom element where
        // we want the dark theme to start.  In Legacy, you can't switch back to light theme once you switch to dark (no nesting).
        // The problem with our core pack Components that use Layer to display the dropdown, it is not in the same dom
        // tree as the parent component.  It is in its own dom tree off of the root dom element, so it won't see the
        // .oj-color-invert class in the dom tree of the select single.
        // Since in legacy .oj-color-invert can appear anywhere, not just on the root dom element, if the colorScheme
        // is the same as the default colorScheme then we need to look at the ref to determine if it or any of its
        // ancestors has the .oj-color-invert class.  If it does(and doesn't have the preact .oj-c-colorscheme-dark class),
        // use 'dark' colorScheme.
        // We only want to do this for legacy, so if the closest element that has the .oj-color-invert also has .oj-c-colorscheme-dark,
        // then we don't want to override since this isn't a legacy color change and we already handle it in our environment context
        // so the color scheme nesting will work in Preact/Core Pack.
        const closestElementWithColorInvertClass = logicalParentRef &&
            logicalParentRef.current &&
            typeof logicalParentRef.current.closest === 'function'
            ? logicalParentRef.current.closest(`.${Theme.INVERT_CLASS}:not(.${Theme.DARK_CLASS})`)
            : null;
        setColorScheme(currentColorScheme !== LayerHost.DefaultEnvironment.colorScheme
            ? currentColorScheme
            : closestElementWithColorInvertClass
                ? 'dark'
                : undefined);
    }, [logicalParentRef, currentColorScheme]);
    const interpolations = mergeInterpolations.mergeInterpolations([...Object.values(theme.themeInterpolations)]);
    const { class: classes } = interpolations({ colorScheme, scale, density });
    return classes;
}

exports.useThemeInterpolations = useThemeInterpolations;
//# sourceMappingURL=useThemeInterpolations-e3c7807c.js.map
