"use strict";
exports.__esModule = true;
exports.TreeNav = exports.cnTreeNav = void 0;
var tslib_1 = require("tslib");
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
// @ts-nocheck
require("./TreeNav.css");
var react_1 = (0, tslib_1.__importStar)(require("react"));
var bem_1 = require("../../utils/bem");
var Button_1 = require("../Button/Button");
var Typography_1 = require("../Typography/Typography");
exports.cnTreeNav = (0, bem_1.cn)('TreeNav');
exports.TreeNav = react_1["default"].forwardRef(function (props, ref) {
    var _a = (0, tslib_1.__read)((0, react_1.useState)(false), 2), visible = _a[0], setVisible = _a[1];
    var pageRef = props.pageRef, _b = props.items, items = _b === void 0 ? [] : _b, title = props.title, _c = props.getLabel, getLabel = _c === void 0 ? function (item) { return item.title; } : _c, onClick = props.onClick, className = props.className, fixed = props.fixed, otherProps = (0, tslib_1.__rest)(props, ["pageRef", "items", "title", "getLabel", "onClick", "className", "fixed"]);
    var _d = (0, tslib_1.__read)((0, react_1.useState)(items), 2), groups = _d[0], setGroups = _d[1];
    var handleScrollTo = function (item) {
        var y = item.el.getBoundingClientRect().top +
            window.pageYOffset -
            (document.querySelector('.Header').offsetHeight + 40);
        window.scrollTo({ top: y, behavior: 'smooth' });
    };
    var handleClick = function (item) {
        if (onClick) {
            onClick(item);
        }
        else {
            handleScrollTo(item);
        }
    };
    // eslint-disable-next-line react-hooks/rules-of-hooks
    (0, react_1.useEffect)(function () {
        if (pageRef === null || pageRef === void 0 ? void 0 : pageRef.current) {
            var hTags = pageRef.current.querySelectorAll('h2, h3');
            var arr_1 = [];
            hTags.forEach(function (hTag) {
                var tagContent = hTag.innerText;
                arr_1.push({
                    title: tagContent,
                    el: hTag,
                    tagName: hTag.tagName
                });
                setGroups(arr_1);
            });
        }
    }, [pageRef]);
    (0, react_1.useEffect)(function () {
        if (fixed) {
            setVisible(true);
            setTimeout(function () {
                setVisible(false);
            }, 2000);
        }
    }, []);
    if (items.length === 0 && !(pageRef === null || pageRef === void 0 ? void 0 : pageRef.current)) {
        return null;
    }
    if (groups.length === 0) {
        return null;
    }
    var openDialog = function () {
        setVisible(true);
    };
    var closeDialog = function () {
        setVisible(false);
    };
    return (react_1["default"].createElement("div", (0, tslib_1.__assign)({ className: (0, exports.cnTreeNav)({ fixed: fixed, visible: visible }, [className]) }, otherProps, { ref: ref, onClick: openDialog }),
        react_1["default"].createElement("div", { className: (0, exports.cnTreeNav)('Head') },
            title && (react_1["default"].createElement(Typography_1.Typography.Text, { className: (0, exports.cnTreeNav)('Head-Title'), size: "xs", weight: "bold", transform: "uppercase" }, title)),
            fixed && (react_1["default"].createElement(Button_1.Button, { view: "ghost", className: (0, exports.cnTreeNav)('Toggle'), onClick: function (e) {
                    e.stopPropagation();
                    closeDialog();
                } }))),
        groups.length > 0 &&
            groups.map(function (item, index) {
                if (groups.length >= 10 && item.tagName === 'H3')
                    return null;
                return (react_1["default"].createElement("div", { key: index, className: (0, exports.cnTreeNav)('Item', {
                        hide: groups.length >= 10 && item.tagName === 'H3',
                        tag: item.tagName ? item.tagName : null
                    }), onClick: function () { return handleClick(item); } },
                    react_1["default"].createElement(Typography_1.Typography.Text, { size: "s" }, getLabel(item))));
            })));
});
