import { useEffect, useRef } from "react";
import isEqual from "lodash.isequal";
export function StateProvider({ value, defaultValue, forceValue, allowedValues, "data-plasmic-name": plasmicName, onChange, }) {
    const onChangeRef = useRef(onChange);
    onChangeRef.current = onChange;
    function isValueDisallowed(v) {
        return allowedValues != null && !allowedValues.includes(v);
    }
    let nextValue, triggerOnChange = false;
    function setValue(suggestedNextValue) {
        if (!isEqual(value, suggestedNextValue)) {
            triggerOnChange = true;
            nextValue = suggestedNextValue;
        }
    }
    if (forceValue !== undefined) {
        setValue(forceValue);
    }
    else if (value === undefined || isValueDisallowed(value)) {
        if (defaultValue !== undefined && !isValueDisallowed(defaultValue)) {
            setValue(defaultValue);
        }
        else {
            setValue(undefined);
        }
    }
    useEffect(() => {
        if (!triggerOnChange) {
            return;
        }
        if (process.env.NODE_ENV !== "production") {
            console.debug(`StateProvider[name=${plasmicName}]#onChange()`, nextValue);
        }
        onChangeRef.current?.(nextValue);
        // eslint-disable-next-line react-hooks/exhaustive-deps
    }, [triggerOnChange, nextValue]);
    return null;
}
//# sourceMappingURL=StateProvider.jsx.map