import React, { useContext, useState, useCallback, useEffect, useRef } from 'react';
import classNames from 'classnames';
import { ConfigContext } from '../config-provider/config-context';
import { getPrefixCls } from '../_utils/general';
import { AnchorContext } from './anchor-context';
import Sticky from '../sticky';
var Anchor = function (props) {
    var _a = props.offsetTop, offsetTop = _a === void 0 ? 0 : _a, offsetBottom = props.offsetBottom, className = props.className, style = props.style, children = props.children, customisedCls = props.prefixCls;
    var configContext = useContext(ConfigContext);
    var prefixCls = getPrefixCls('anchor', configContext.prefixCls, customisedCls);
    var cls = classNames(prefixCls, className);
    var _b = useState(''), activeId = _b[0], setActiveId = _b[1];
    var anchorRef = useRef(null);
    var inkBallRef = useRef(null);
    var updateInk = useCallback(function () {
        var anchorEl = anchorRef.current;
        if (anchorEl) {
            var linkNode = anchorEl.getElementsByClassName(prefixCls + "__link_active")[0];
            var inkEl = inkBallRef.current;
            if (linkNode && inkEl) {
                var linkEl = linkNode;
                inkEl.style.top = linkEl.offsetTop + linkEl.clientHeight / 2 - 4.5 + "px";
            }
        }
    }, [prefixCls]);
    var scrollToAnchor = useCallback(function (anchorName) {
        var element = document.body.querySelector("#" + anchorName);
        if (element) {
            element.scrollIntoView(true);
        }
    }, []);
    var handleLinkClick = function (e, anchorName) {
        var location = window.location;
        var url;
        if (location.pathname.includes('/#/')) {
            url = location.protocol + '//' + location.host + location.pathname + ("?anchor=" + anchorName);
        }
        else {
            url = location.protocol + '//' + location.host + location.pathname + ("#" + anchorName);
        }
        window.history.pushState({ path: url }, '', url);
        scrollToAnchor(anchorName);
    };
    var initHashScroll = useCallback(function () {
        var location = window.location;
        if (location.search) {
            var urlParams = new URLSearchParams(location.search);
            var anchor = urlParams.get('anchor');
            !!anchor && scrollToAnchor(anchor);
        }
        else if (location.hash) {
            var anchor = location.hash.replace('#', '');
            !!anchor && scrollToAnchor(anchor);
        }
    }, [scrollToAnchor]);
    var handleScroll = useCallback(function () {
        var headings = document.querySelectorAll('*[id]');
        if (headings.length === 0)
            return;
        var newActiveId = headings[0].id;
        var top = document.documentElement.scrollTop;
        headings.forEach(function (h) {
            var el = document.querySelector("#" + h.id);
            if (!el)
                return;
            if (el.offsetTop <= top) {
                newActiveId = h.id;
                updateInk();
            }
        });
        setActiveId(newActiveId);
    }, [updateInk]);
    useEffect(function () {
        initHashScroll();
    }, [initHashScroll]);
    useEffect(function () {
        document.addEventListener('scroll', handleScroll);
        handleScroll();
        return function () {
            document.removeEventListener('scroll', handleScroll);
        };
    }, [handleScroll]);
    return (React.createElement(AnchorContext.Provider, { value: { activeId: activeId, onClick: handleLinkClick } },
        React.createElement(Sticky, { offsetTop: offsetTop, offsetBottom: offsetBottom },
            React.createElement("ul", { className: cls, style: style, ref: anchorRef },
                React.createElement("div", { className: prefixCls + "__ink" },
                    React.createElement("div", { className: prefixCls + "__ink-ball", ref: inkBallRef })),
                React.Children.map(children, function (child) {
                    var childElement = child;
                    if (childElement.type.displayName === 'AnchorLink') {
                        var childProps = {
                            prefixCls: prefixCls,
                        };
                        return React.cloneElement(childElement, childProps);
                    }
                    return null;
                })))));
};
Anchor.displayName = 'Anchor';
export default Anchor;
//# sourceMappingURL=anchor.js.map