var __rest = (this && this.__rest) || function (s, e) {
    var t = {};
    for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
        t[p] = s[p];
    if (s != null && typeof Object.getOwnPropertySymbols === "function")
        for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
            if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
                t[p[i]] = s[p[i]];
        }
    return t;
};
import { jsx as _jsx } from "@emotion/react/jsx-runtime";
import { useRef, useEffect, } from 'react';
import { Field } from '../field';
import { useConfig, useCommander } from '../../../../hooks';
import { deleteValue } from '../../../../commands';
import { checkDependency } from './check-dependency';
export const DependencyField = (_a) => {
    var { path, dependencyPath, dependencyValue, deleteOnHide = true } = _a, props = __rest(_a, ["path", "dependencyPath", "dependencyValue", "deleteOnHide"]);
    const { dispatch } = useCommander();
    const dependencyCurrentValue = useConfig(dependencyPath);
    const value = useConfig(path);
    const visible = checkDependency(dependencyCurrentValue, dependencyValue);
    const visibleRef = useRef(visible);
    // dispatch inside useEffect leads to false executions
    // it should be carefully checked and dispatched ony if it is necessary
    useEffect(() => {
        if (visibleRef.current !== visible) {
            if (!visible && deleteOnHide && value !== undefined) {
                dispatch(deleteValue(path, true));
            }
            visibleRef.current = visible;
        }
    }, [visible]);
    if (!visible) {
        return null;
    }
    return (_jsx(Field, Object.assign({ path: path }, props)));
};
