(function () {
    const docnav = document.querySelector('header.doc-nav');
    const active = docnav.querySelector('li.active');
    active?.scrollIntoView({ block: 'center', inline: 'nearest' });
    setupMobileToggle();
    setupDarkMode();
    setupScrollSpy();
    setupSearch();
    setupCollapse();
    setupCodeCopy();
})();

function setupScrollSpy() {
    const mainContent = document.querySelector('#main-content');
    const toc = mainContent.querySelector('.doc-toc');
    if (!toc) {
        return;
    }
    const sections = mainContent.querySelectorAll('section');
    const sectionPositions = Array.from(sections).map((section) => section.offsetTop);
    let lastActive = null;
    let clickedScroll = false;
    const handleScroll = debounce(() => {
        if (clickedScroll) {
            clickedScroll = false;
            return;
        }
        if (lastActive) {
            lastActive.classList.remove('active');
        }
        for (const [i, position] of sectionPositions.entries()) {
            if (position >= mainContent.scrollTop) {
                const link = toc.querySelector('a[href="#' + sections[i].id + '"]');
                if (link) {
                    // Set current menu link as active
                    link.classList.add('active');
                    const tocStart = toc.getBoundingClientRect().top + window.scrollY;
                    if (link.offsetTop > toc.scrollTop + toc.clientHeight - tocStart - 16) {
                        // Scroll the toc down if the active links position is below the bottom of the toc
                        toc.scrollTop = link.clientHeight + link.offsetTop - toc.clientHeight + tocStart + 10;
                    } else if (toc.scrollTop < 32 + tocStart) {
                        // Scroll to the top of the toc if having scrolled up into the last bit
                        toc.scrollTop = 0;
                    } else if (link.offsetTop < toc.scrollTop) {
                        // Scroll the toc up if the active links position is above the top of the toc
                        toc.scrollTop = link.offsetTop - 10;
                    }
                }
                lastActive = link;
                break;
            }
        }
    }, 10);
    mainContent.addEventListener('scroll', handleScroll);
    toc.querySelectorAll('a').forEach((a) =>
        a.addEventListener('click', () => {
            if (lastActive) {
                lastActive.classList.remove('active');
            }
            a.classList.add('active');
            lastActive = a;
            clickedScroll = true;
        }),
    );
}

function setupMobileToggle() {
    document.getElementById('toggle-menu').addEventListener('click', () => {
        const docNav = document.querySelector('header.doc-nav');
        const isHidden = docNav.classList.contains('hidden');
        docNav.classList.toggle('hidden');
        const search = docNav.querySelector('.search');
        const searchHasResults = search.classList.contains('has-results');
        if (isHidden && searchHasResults) {
            search.classList.remove('mobile-hidden');
        } else {
            search.classList.add('mobile-hidden');
        }
        const content = docNav.querySelector('.content');
        content.classList.toggle('hidden');
        content.classList.toggle('show');
    });
}

function setupDarkMode() {
    const html = document.querySelector('html');
    const darkModeToggle = document.getElementById('dark-mode-toggle');
    darkModeToggle.addEventListener('click', () => {
        html.classList.toggle('dark');
        const isDarkModeEnabled = html.classList.contains('dark');
        localStorage.setItem('dark-mode', isDarkModeEnabled);
        darkModeToggle.setAttribute('aria-checked', isDarkModeEnabled);
    });
}

function setupSearch() {
    const onInputChange = debounce((e) => {
        const searchValue = e.target.value.toLowerCase();
        const docNav = document.querySelector('header.doc-nav');
        const menu = docNav.querySelector('.content');
        const search = docNav.querySelector('.search');
        if (searchValue === '') {
            // reset to default
            menu.style.display = '';
            if (!search.classList.contains('hidden')) {
                search.classList.add('hidden');
                search.classList.remove('has-results');
            }
        } else if (searchValue.length >= 2) {
            // search for less than 2 characters can display too much results
            search.innerHTML = '';
            menu.style.display = 'none';
            if (search.classList.contains('hidden')) {
                search.classList.remove('hidden');
                search.classList.remove('mobile-hidden');
                search.classList.add('has-results');
            }
            // cache length for performance
            let foundModule = false;
            const ul = document.createElement('ul');
            search.appendChild(ul);
            for (const [i, title] of searchModuleIndex.entries()) {
                // no toLowerCase needed because modules are always lowercase
                if (title.indexOf(searchValue) === -1) {
                    continue;
                }
                foundModule = true;
                // [description, link]
                const data = searchModuleData[i];
                const el = createSearchResult({
                    badge: 'module',
                    description: data[0],
                    link: data[1],
                    title: title,
                });
                ul.appendChild(el);
            }
            if (foundModule) {
                const hr = document.createElement('hr');
                hr.classList.add('separator');
                search.appendChild(hr);
            }
            let results = [];
            for (const [i, title] of searchIndex.entries()) {
                if (title.toLowerCase().indexOf(searchValue) === -1) {
                    continue;
                }
                // [badge, description, link]
                const data = searchData[i];
                results.push({
                    badge: data[0],
                    description: data[1],
                    link: data[2],
                    title: data[3] + ' ' + title,
                });
            }
            results.sort((a, b) => (a.title < b.title ? -1 : a.title > b.title ? 1 : 0));
            const ul_ = document.createElement('ul');
            search.appendChild(ul_);
            results.forEach((result) => {
                const el = createSearchResult(result);
                ul_.appendChild(el);
            });
        }
    });
    const searchInput = document.querySelector('#search input');
    const url = document.location.toString();
    if (url.includes('?')) {
        const query =
            url
                .split('?')
                .slice(1)
                .filter((p) => p.startsWith('q='))
                .map((p) => p.replace(/^q=/, ''))[0] || '';
        if (query) {
            searchInput.value = query;
            searchInput.focus();
            onInputChange({ target: { value: query } });
        }
    }
    const searchInputDiv = document.getElementById('search');
    searchInputDiv.addEventListener('input', onInputChange);
    setupSearchKeymaps();
}

function setupSearchKeymaps() {
    const searchInput = document.querySelector('#search input');
    const mainContent = document.querySelector('#main-content');
    const docnav = document.querySelector('header.doc-nav');
    // Keyboard shortcut indicator
    const searchKeys = document.createElement('div');
    const modifierKeyPrefix = navigator.platform.includes('Mac') ? '⌘' : 'Ctrl';
    searchKeys.setAttribute('id', 'search-keys');
    searchKeys.innerHTML = '<kbd>' + modifierKeyPrefix + '</kbd><kbd>k</kbd>';
    searchInput.parentElement?.appendChild(searchKeys);
    searchInput.addEventListener('focus', () => searchKeys.classList.add('hide'));
    searchInput.addEventListener('blur', () => searchKeys.classList.remove('hide'));
    // Global shortcuts to focus searchInput
    document.addEventListener('keydown', (ev) => {
        if (ev.key === '/' || ((ev.ctrlKey || ev.metaKey) && ev.key === 'k')) {
            ev.preventDefault();
            searchInput.focus();
        }
    });
    // Shortcuts while searchInput is focused
    let selectedIdx = -1;
    function selectResult(results, newIdx) {
        if (selectedIdx !== -1) {
            results[selectedIdx].classList.remove('selected');
        }
        results[newIdx].classList.add('selected');
        results[newIdx].scrollIntoView({ behavior: 'instant', block: 'nearest', inline: 'nearest' });
        selectedIdx = newIdx;
    }
    searchInput.addEventListener('keydown', (ev) => {
        const searchResults = document.querySelectorAll('.search .result');
        switch (ev.key) {
            case 'Escape':
                searchInput.blur();
                mainContent.focus();
                break;
            case 'Enter':
                if (!searchResults.length || selectedIdx === -1) break;
                searchResults[selectedIdx].querySelector('a').click();
                break;
            case 'ArrowDown':
                ev.preventDefault();
                if (!searchResults.length) break;
                if (selectedIdx >= searchResults.length - 1) {
                    // Cycle to first if last is selected
                    selectResult(searchResults, 0);
                } else {
                    // Select next
                    selectResult(searchResults, selectedIdx + 1);
                }
                break;
            case 'ArrowUp':
                ev.preventDefault();
                if (!searchResults.length) break;
                if (selectedIdx <= 0) {
                    // Cycle to last if first is selected (or select it if none is selected yet)
                    selectResult(searchResults, searchResults.length - 1);
                } else {
                    // Select previous
                    selectResult(searchResults, selectedIdx - 1);
                }
                break;
            default:
                docnav.scroll(0, 0);
                selectedIdx = -1;
        }
    });
    // Ensure initial keyboard navigability
    mainContent.focus();
}

function createSearchResult(data) {
    const li = document.createElement('li');
    li.classList.add('result');
    const a = document.createElement('a');
    a.href = data.link;
    a.classList.add('link');
    li.appendChild(a);
    const definition = document.createElement('div');
    definition.classList.add('definition');
    a.appendChild(definition);
    if (data.description) {
        const description = document.createElement('div');
        description.classList.add('description');
        description.textContent = data.description;
        a.appendChild(description);
    }
    const title = document.createElement('span');
    title.classList.add('title');
    title.textContent = data.title;
    definition.appendChild(title);
    const badge = document.createElement('badge');
    badge.classList.add('badge');
    badge.textContent = data.badge;
    definition.appendChild(badge);
    return li;
}

function setupCollapse() {
    const dropdownArrows = document.querySelectorAll('.dropdown-arrow');
    dropdownArrows.forEach((arrow) => {
        arrow.addEventListener('click', (e) => {
            const parent = e.target.parentElement.parentElement.parentElement;
            parent.classList.toggle('open');
        });
    });
}

function debounce(func, timeout) {
    let timer;
    return (...args) => {
        const next = () => func(...args);
        if (timer) {
            clearTimeout(timer);
        }
        timer = setTimeout(next, timeout > 0 ? timeout : 300);
    };
}

function setupCodeCopy() {
    const pres = document.querySelectorAll('pre:not(.signature)');
    pres.forEach((pre) => {
        const tempDiv = document.createElement('button');
        tempDiv.className = 'copy';
        tempDiv.innerHTML =
            '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="16" height="16" fill="rgba(173,184,194,1)"><path d="M6.9998 6V3C6.9998 2.44772 7.44752 2 7.9998 2H19.9998C20.5521 2 20.9998 2.44772 20.9998 3V17C20.9998 17.5523 20.5521 18 19.9998 18H16.9998V20.9991C16.9998 21.5519 16.5499 22 15.993 22H4.00666C3.45059 22 3 21.5554 3 20.9991L3.0026 7.00087C3.0027 6.44811 3.45264 6 4.00942 6H6.9998ZM5.00242 8L5.00019 20H14.9998V8H5.00242ZM8.9998 6H16.9998V16H18.9998V4H8.9998V6Z"></path></svg>';
        tempDiv.addEventListener('click', (e) => {
            const parent = e.target;
            var code = tempDiv.parentElement.querySelector('code');
            let i = Array.from(code.childNodes)
                .map((r) => r.textContent)
                .join('');
            navigator.clipboard.writeText(i);
            var tmp = tempDiv.innerHTML;
            tempDiv.innerHTML = 'Copied';
            window.setTimeout(function () {
                tempDiv.innerHTML = tmp;
            }, 1000);
        });
        pre.insertAdjacentElement('afterbegin', tempDiv);
    });
}