"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.useResizeObserver = void 0;
var react_1 = require("react");
var reducer_1 = require("./reducer");
var utils_1 = require("./utils");
function useResizeObserver(_a) {
    var id = _a.id, _b = _a.onResize, onResize = _b === void 0 ? utils_1.noop : _b, _c = _a.onExit, onExit = _c === void 0 ? utils_1.noop : _c;
    // Select the node that will be observed for mutations
    var targetNode = document.getElementById(id) || document.body;
    // Set up hooks
    // setup state
    var _d = (0, react_1.useReducer)(function (prev, next) { return (0, reducer_1.reducer)(prev, next); }, {
        width: targetNode.offsetWidth,
        height: targetNode.offsetHeight,
        running: false
    }), state = _d[0], setState = _d[1];
    var width = state.width, height = state.height, running = state.running;
    var _onResize = (0, react_1.useRef)(onResize);
    _onResize.current = onResize;
    var _onExit = (0, react_1.useRef)(onExit);
    _onExit.current = onExit;
    (0, react_1.useEffect)(function () {
        // setup callbacks
        var callOnResize = function (_a) {
            var width = _a.width, height = _a.height, _ = _a.running;
            return _onResize.current({ width: width, height: height });
        };
        var callbacks = [setState, callOnResize];
        // Callback function to execute when mutations are observed
        var raf;
        function _onMutation() {
            // if already running, avoid the payload
            if (!running) {
                // set as running
                setState({ running: true });
                if (window.requestAnimationFrame) {
                    raf = window.requestAnimationFrame(runCallbacks);
                }
                else {
                    raf = setTimeout(runCallbacks, 66);
                }
            }
        }
        function runCallbacks() {
            // try to get the target the user wants
            var _targetNode = document.getElementById(id) || document.body;
            var offsetHeight = _targetNode.offsetHeight, offsetWidth = _targetNode.offsetWidth;
            // run over the callbacks!
            return callbacks.forEach(function (callback) {
                return callback({ width: offsetWidth, height: offsetHeight, running: false });
            });
        }
        // Create an observer instance linked to the callback function
        var observer = new ResizeObserver(_onMutation);
        // Start observing the target node for configured mutations
        observer.observe(targetNode, { box: "border-box" });
        // force an initial run!
        _onMutation();
        // Stop observing on unMount
        return function () {
            // clear any ungoing timers or rafs
            if (window.cancelAnimationFrame) {
                window.cancelAnimationFrame(raf);
            }
            else {
                clearTimeout(raf);
            }
            // catch left over records
            // disconnect
            observer.disconnect();
            // call onExit callback
            _onExit.current({ width: width, height: height });
        };
    }, [setState]);
    return [width, height];
}
exports.useResizeObserver = useResizeObserver;
exports.default = useResizeObserver;
//# sourceMappingURL=useResizeObserver.js.map