import tocbot from 'tocbot';

/**
 * 文章阅读模块
 */
export class ArticleRead {
    private readonly _fab = document.querySelector<HTMLElement>('.js-toc-fab');
    private readonly _toc = document.querySelector<HTMLElement>('.js-toc');
    private _toggleToc: ((event: Event) => void) | null = null;
    private _outsideClickHandler: ((event: MouseEvent) => void) | null = null;
    private _tocClickHandler: ((event: MouseEvent) => void) | null = null;
    private _tocInitialized: boolean = false;

    constructor() {
        this.init();
    }

    public destroy(): void {
        if (this._fab && this._toggleToc) {
            this._fab.removeEventListener('click', this._toggleToc);
        }
        if (this._outsideClickHandler) {
            document.removeEventListener('click', this._outsideClickHandler);
        }
        if (this._toc && this._tocClickHandler) {
            this._toc.removeEventListener('click', this._tocClickHandler);
        }
        if (this._tocInitialized) {
            tocbot.destroy();
            this._tocInitialized = false;
        }

        this._toggleToc = null;
        this._outsideClickHandler = null;
        this._tocClickHandler = null;
    }

    private init() {
        // 1. 图片简单预处理
        document.querySelectorAll('.article-content img').forEach((img) => {
            img.classList.add('img-fluid');
        });

        // 2. 目录生成（Tocbot）
        this.generateToc();
        this.initMobileEvents();
    }

    private initMobileEvents(): void {
        const fab = this._fab;
        const toc = this._toc;

        if (!fab || !toc) {
            return;
        }

        this._toggleToc = (event: Event) => {
            event.preventDefault();
            event.stopPropagation();
            toc.classList.toggle('is-open-mobile');
        };
        fab.addEventListener('click', this._toggleToc);

        // 点击外部时关闭
        this._outsideClickHandler = (event: MouseEvent) => {
            if (window.innerWidth > 1200) {
                return;
            }

            const target = event.target as Node;
            // 如果点击位置在TOC和FAB之外，则关闭
            if (
                !toc.contains(target) &&
                !fab.contains(target) &&
                toc.classList.contains('is-open-mobile')
            ) {
                toc.classList.remove('is-open-mobile');
            }
        };
        document.addEventListener('click', this._outsideClickHandler);

        // 点击TOC内部链接时关闭
        this._tocClickHandler = (event: MouseEvent) => {
            const target = event.target as HTMLElement;
            if (target.tagName === 'A' || target.closest('a')) {
                // 如果是移动端视图
                if (window.innerWidth <= 1200) {
                    toc.classList.remove('is-open-mobile');
                }
            }
        };
        toc.addEventListener('click', this._tocClickHandler);
    }

    private generateToc(): void {
        const tocContainer = document.querySelectorAll('.js-toc');
        const content = document.querySelectorAll(
            '.article-content h1, .article-content h2, .article-content h3'
        );

        if (tocContainer.length === 0 || content.length === 0) {
            tocContainer.forEach((container) => {
                const containerElement = container as HTMLElement;
                if (containerElement != null) {
                    containerElement.style.display = 'none';
                }
            });
            return;
        }

        tocbot.init({
            tocSelector: '.js-toc',
            contentSelector: '.article-content',
            headingSelector: 'h1, h2, h3',
            hasInnerContainers: true,
            scrollSmooth: true,
            scrollSmoothDuration: 420,
            // 适配固定头部
            headingsOffset: 80,
            scrollSmoothOffset: -80,
        });
        this._tocInitialized = true;

        // 带动画显示目录
        tocContainer.forEach((container) => container.classList.add('is-visible'));
    }
}