import { __assign, __read, __rest } from "tslib";
/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/click-events-have-key-events */
// @ts-nocheck
import './TreeNav.css';
import React, { useEffect, useState } from 'react';
import { cn } from '../../utils/bem';
import { Button } from '../Button/Button';
import { Typography } from '../Typography/Typography';
export var cnTreeNav = cn('TreeNav');
export var TreeNav = React.forwardRef(function (props, ref) {
    var _a = __read(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 = __rest(props, ["pageRef", "items", "title", "getLabel", "onClick", "className", "fixed"]);
    var _d = __read(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
    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]);
    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.createElement("div", __assign({ className: cnTreeNav({ fixed: fixed, visible: visible }, [className]) }, otherProps, { ref: ref, onClick: openDialog }),
        React.createElement("div", { className: cnTreeNav('Head') },
            title && (React.createElement(Typography.Text, { className: cnTreeNav('Head-Title'), size: "xs", weight: "bold", transform: "uppercase" }, title)),
            fixed && (React.createElement(Button, { view: "ghost", className: 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.createElement("div", { key: index, className: cnTreeNav('Item', {
                        hide: groups.length >= 10 && item.tagName === 'H3',
                        tag: item.tagName ? item.tagName : null
                    }), onClick: function () { return handleClick(item); } },
                    React.createElement(Typography.Text, { size: "s" }, getLabel(item))));
            })));
});
