import { __assign, __rest } from "tslib";
import React, { useCallback, useContext, useState } from 'react';
import classNames from 'classnames';
import { getScroll, getNodeScrollHeight, getNodeHeight } from '../_utils/dom';
import { useEventListener } from '../_utils/hooks';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
var ScrollIndicator = function (props) {
    var _a;
    var customisedCls = props.prefixCls, _b = props.fixed, fixed = _b === void 0 ? true : _b, target = props.target, className = props.className, style = props.style, otherProps = __rest(props, ["prefixCls", "fixed", "target", "className", "style"]);
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('scroll-indicator', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className, (_a = {},
        _a[prefixCls + "_fixed"] = fixed,
        _a));
    var _c = useState('0%'), width = _c[0], setWidth = _c[1];
    var handleScroll = useCallback(function (e) {
        var container = e.target;
        if (container !== (target && target())) {
            container = window;
        }
        if (container) {
            var el = container;
            var scrollTop = getScroll(el, true);
            var height = getNodeScrollHeight(el) - getNodeHeight(el);
            var scrolled = (scrollTop / height) * 100;
            setWidth(scrolled + "%");
        }
    }, [target]);
    var element = target ? (target() ? target() : window) : window;
    useEventListener('scroll', handleScroll, element);
    return React.createElement("div", __assign({}, otherProps, { className: cls, style: __assign(__assign({}, style), { width: width }) }));
};
ScrollIndicator.displayName = 'ScrollIndicator';
export default ScrollIndicator;
//# sourceMappingURL=index.js.map