import { useMapWithInit } from "./useMapWithInit.js";
import { useStyleObserver } from "./useStyleObserver.js";
/**
 * Hook that returns a style object with observed CSS property values. Automatically updates when
 * the observed properties change.
 */
export function useStyle(properties, options = {}) {
    const { ref, initialValues, onChange } = options;
    const propertyValues = useMapWithInit(() => initialValues
        ? Object.entries(initialValues)
        : properties.map((property) => [property, undefined]));
    const callbackRef = useStyleObserver(properties, (records) => {
        let changed = false;
        for (const record of records) {
            if (propertyValues.get(record.property) !== record.value) {
                propertyValues.set(record.property, record.value);
                changed = true;
            }
        }
        if (changed) {
            /**
             * This assertion is safe because `immediate: true` means that all watched properties will
             * be included in the first call (and any property that is not set will be an empty string
             * rather than `undefined`; see `record.value`'s type).
             */
            onChange?.(Object.fromEntries(propertyValues));
        }
    }, [], { ...(ref !== undefined && { ref }), immediate: true });
    return [callbackRef, Object.fromEntries(propertyValues)];
}
//# sourceMappingURL=useStyle.js.map