import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
import { identity } from 'ramda';
export var ScrollType;
(function (ScrollType) {
    ScrollType["Error"] = "Error";
    ScrollType["NewAttribute"] = "NewAttribute";
    ScrollType["NewView"] = "NewView";
})(ScrollType || (ScrollType = {}));
export var isHighlightedErrorType = function (type) { return type === ScrollType.Error; };
export var isHighlightedAttributeType = function (type) { return type === ScrollType.NewAttribute; };
export var ScrollToElementContext = React.createContext({
    element: null,
    type: null,
    highlightView: identity,
    highlightError: identity,
    highlightAttribute: identity,
    scrollIntoRef: identity
});
export var ScrollToElementProvider = function (_a) {
    var children = _a.children;
    var _b = useState(null), element = _b[0], setElement = _b[1];
    var highlightTimer = useRef(null);
    var scrollIntoRef = useCallback(function (ref) {
        if (!ref.current)
            return;
        ref.current.scrollIntoView({ behavior: 'smooth', block: 'center' });
        clearTimeout(highlightTimer.current);
        highlightTimer.current = setTimeout(function () { return setElement(null); }, 2000);
    }, []);
    var handleHighlightError = useCallback(function (highlightedError) {
        setElement({ value: highlightedError, type: ScrollType.Error });
    }, []);
    var handleHighlightAttribute = useCallback(function (highlightedAttribute) {
        setTimeout(function () { return setElement({ value: highlightedAttribute, type: ScrollType.NewAttribute }); }, 300);
    }, []);
    var handleHighlightView = useCallback(function (value) {
        setElement({ value: value, type: ScrollType.NewView });
    }, []);
    var contextValue = useMemo(function () { return ({
        element: element === null || element === void 0 ? void 0 : element.value,
        type: element === null || element === void 0 ? void 0 : element.type,
        highlightView: handleHighlightView,
        highlightError: handleHighlightError,
        highlightAttribute: handleHighlightAttribute,
        scrollIntoRef: scrollIntoRef
    }); }, [element, scrollIntoRef]);
    useEffect(function () {
        return function () { return clearTimeout(highlightTimer.current); };
    }, []);
    return React.createElement(ScrollToElementContext.Provider, { value: contextValue }, children);
};
