/**
 * amis-ui v6.12.0-beta.0
 * Copyright 2018-2025 fex
 */

import { __extends, __assign, __decorate, __metadata } from 'tslib';
import React__default from 'react';
import { themeable, autobind, uncontrollable } from 'amis-core';
import find from 'lodash/find';

/**
 * @file AnchorNav
 * @description 锚点导航
 * @author hsm-lv
 */
var AnchorNavSectionComponent = /** @class */ (function (_super) {
    __extends(AnchorNavSectionComponent, _super);
    function AnchorNavSectionComponent() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        _this.contentRef = function (ref) { return (_this.contentDom = ref); };
        return _this;
    }
    AnchorNavSectionComponent.prototype.render = function () {
        var _a = this.props, cx = _a.classnames, children = _a.children, className = _a.className, name = _a.name;
        return (React__default.createElement("div", { ref: this.contentRef, className: cx('AnchorNav-section', className), "data-id": name + '' }, children));
    };
    return AnchorNavSectionComponent;
}(React__default.PureComponent));
var AnchorNavSection = themeable(AnchorNavSectionComponent);
var AnchorNav = /** @class */ (function (_super) {
    __extends(AnchorNav, _super);
    function AnchorNav() {
        var _this = _super !== null && _super.apply(this, arguments) || this;
        // 滚动区域DOM
        _this.contentDom = React__default.createRef();
        _this.sections = [];
        _this.fromSelect = false;
        return _this;
    }
    AnchorNav.prototype.componentDidMount = function () {
        var _this = this;
        this.observer = new IntersectionObserver(this.scrollToNav);
        this.sections.forEach(function (item) {
            _this.observer.observe(item.element);
        });
        if (this.props.active) {
            this.scrollToSection(this.props.active);
        }
    };
    AnchorNav.prototype.componentWillUnmount = function () {
        this.observer.disconnect();
    };
    AnchorNav.prototype.scrollToNav = function (entries) {
        var _this = this;
        entries.forEach(function (entry) {
            var key = entry.target.getAttribute('data-id');
            var currentSection = _this.sections.find(function (item) { return item.key === key; });
            if (currentSection) {
                currentSection.isIntersecting = entry.isIntersecting;
            }
        });
        // 找到第一个可见的区域
        var firstIntersectingSection = this.sections.find(function (item) { return item.isIntersecting; });
        if (!this.fromSelect) {
            firstIntersectingSection && this.fireSelect(firstIntersectingSection.key);
        }
        else {
            // 滚动结束后，重置fromSelect状态
            if (this.fromSelectTimer) {
                clearTimeout(this.fromSelectTimer);
            }
            this.fromSelectTimer = setTimeout(function () {
                _this.fromSelect = false;
            }, 300);
        }
    };
    AnchorNav.prototype.scrollToSection = function (key) {
        var _a, _b;
        this.fromSelect = true;
        var node = (_a = find(this.sections, function (item) { return item.key === key; })) === null || _a === void 0 ? void 0 : _a.element;
        (_b = node === null || node === void 0 ? void 0 : node.scrollIntoView) === null || _b === void 0 ? void 0 : _b.call(node, { behavior: 'smooth' });
    };
    AnchorNav.prototype.handleSelect = function (key) {
        this.scrollToSection(key);
        this.fireSelect(key);
    };
    AnchorNav.prototype.fireSelect = function (key) {
        var onSelect = this.props.onSelect;
        onSelect && onSelect(key);
    };
    AnchorNav.prototype.renderLink = function (link, index) {
        var _this = this;
        var _a;
        if (!link) {
            return;
        }
        var _b = this.props, cx = _b.classnames, activeProp = _b.active;
        var _c = link.props, title = _c.title, name = _c.name;
        var active = activeProp === undefined && index === 0 ? name : activeProp;
        // 判断是否为子节点，子节点key为 <父节点索引>-<子节点索引>
        var isChild = ((_a = link.key) === null || _a === void 0 ? void 0 : _a.split('-').length) >= 2;
        return (React__default.createElement("li", { className: cx('AnchorNav-link', isChild ? 'AnchorNav-link-child' : '', String(active) === String(name) ? 'is-active' : ''), key: link.key, onClick: function () { return _this.handleSelect(name); } },
            React__default.createElement("a", { title: title }, title)));
    };
    AnchorNav.prototype.renderSection = function (section, index) {
        var _this = this;
        if (!section) {
            return;
        }
        var _a = this.props, activeProp = _a.active, classnames = _a.classnames;
        var name = section.props.name;
        var key = section.key;
        var active = activeProp === undefined && index === 0 ? name : activeProp;
        return React__default.cloneElement(section, __assign(__assign({}, section.props), { key: key, classnames: classnames, active: active, ref: function (props) {
                if (props && !_this.sections.find(function (item) { return item.key === name; })) {
                    // 收集每个段落的真实dom节点
                    _this.sections.push({ key: name, element: props.ref.contentDom });
                }
            } }));
    };
    AnchorNav.prototype.render = function () {
        var _a;
        var _this = this;
        var _b = this.props, cx = _b.classnames, className = _b.className, style = _b.style, linkClassName = _b.linkClassName, sectionClassName = _b.sectionClassName, children = _b.children, direction = _b.direction;
        if (!Array.isArray(children)) {
            return null;
        }
        return (React__default.createElement("div", { className: cx('AnchorNav', (_a = {},
                _a["AnchorNav--".concat(direction)] = direction,
                _a), className), style: style },
            React__default.createElement("ul", { className: cx('AnchorNav-link-wrap', linkClassName), role: "anchorlist" }, children.map(function (link, index) { return _this.renderLink(link, index); })),
            React__default.createElement("div", { className: cx('AnchorNav-section-wrap', sectionClassName), ref: this.contentDom }, children.map(function (section, index) {
                return _this.renderSection(section, index);
            }))));
    };
    AnchorNav.defaultProps = {
        linkClassName: '',
        sectionClassName: '',
        direction: 'vertical'
    };
    __decorate([
        autobind,
        __metadata("design:type", Function),
        __metadata("design:paramtypes", [Array]),
        __metadata("design:returntype", void 0)
    ], AnchorNav.prototype, "scrollToNav", null);
    return AnchorNav;
}(React__default.Component));
var ThemedAnchorNav = themeable(uncontrollable(AnchorNav, {
    active: 'onSelect'
}));

export { AnchorNav, AnchorNavSection, ThemedAnchorNav as default };
