import { objectKeys } from 'ts-extras';
import { parseCSSPropValue, } from '@graphprotocol/gds-css';
import { useMapWithInit } from "./useMapWithInit.js";
import { useRefWithInit } from "./useRefWithInit.js";
import { useStyleObserver } from "./useStyleObserver.js";
/**
 * Hook to observe and track CSS prop values from the DOM. Returns a callback ref, a map of prop
 * values that updates when CSS properties change, and the array of CSS props.
 */
export function useCSSProps(component, passedValues, options = {}) {
    const { ref, disabled = false } = options;
    const cssProps = useRefWithInit(() => objectKeys(passedValues).map((propName) => component.getCSSPropByName(propName))).current;
    const propValues = useMapWithInit(() => cssProps.map((cssProp) => {
        // Using the initial value for missing passed values could be wrong because it can be overridden in CSS, but it's just for the first render
        const passedValue = passedValues[cssProp.name];
        const initialValue = passedValue !== undefined ? passedValue : cssProp.initialValue;
        return [cssProp.name, initialValue];
    }));
    const cssProperties = useRefWithInit(() => cssProps.map((cssProp) => cssProp.cssProperty)).current;
    const callbackRef = useStyleObserver(cssProperties, (records) => {
        for (const record of records) {
            const prop = cssProps.find((prop) => prop.cssProperty === record.property);
            const value = parseCSSPropValue(prop, record.value);
            if (propValues.get(prop.name) !== value) {
                propValues.set(prop.name, value);
            }
        }
    }, [], { ...(ref !== undefined && { ref }), immediate: true, disabled });
    return [callbackRef, Object.fromEntries(propValues), cssProps];
}
//# sourceMappingURL=useCSSProps.js.map