import * as React from 'react';
import { CSSNumericVariableWatch } from '../components/Select/CSSNumericVariableWatch';
const computedCSSVarNames = [
    '--ab-cmp-select-menu__max-width',
    '--ab-cmp-select-menu__min-width',
    '--ab-cmp-select-menu__max-height',
];
const defaultValues = Object.fromEntries(computedCSSVarNames.map((varName) => [varName, 0]));
export const AdaptableComputedCSSVarsContext = React.createContext(defaultValues);
export const WithAdaptableComputedCSSVars = ({ children }) => {
    const [computedCSSVars, setComputedCSSVars] = React.useState(defaultValues);
    return (React.createElement(AdaptableComputedCSSVarsContext.Provider, { value: computedCSSVars },
        children,
        computedCSSVarNames.map((varName) => (React.createElement(CSSNumericVariableWatch, { key: varName, varName: varName, onChange: (value) => {
                setComputedCSSVars((prev) => ({ ...prev, [varName]: value }));
            } })))));
};
export const useAdaptableComputedCSSVars = () => {
    const context = React.useContext(AdaptableComputedCSSVarsContext);
    return context;
};
export const useAdaptableComputedCSSVar = (varName) => {
    const context = React.useContext(AdaptableComputedCSSVarsContext);
    return context?.[varName];
};
