// The default component class
import { Component } from '../../shared/component.js';

// Lock/unlock document scrolling
import { toggleScrollLock } from '../../shared/event.js';

// Provide functionality to all navs
export class Nav extends Component {
    constructor({
        // Desktop breakpoint
        desktopBreakpoint = 1024,
        // Prefix
        prefix = 'cwf',
        // Selectors
        container = 'nav__container',
        controller = 'nav__controller',
        hamburger = 'nav__hamburger',
        iconRotate = 'nav__icon--rotate',
        item = 'nav__item',
        itemHasDropdown = 'nav__item--has-dropdown',
        itemIsCurrent = 'nav__item--is-current',
        itemIsExpanded = 'nav__item--is-expanded',
        itemIsParentOfCurrent = 'nav__item--is-parent-of-current',
        link = 'nav__link',
        list = 'nav__list',
        listLevel = 'nav__list--level-',
        nav = 'nav',
        scrollable = 'nav__list--scroll',
        modal = 'nav--modal',
        subNav = 'nav--sub',
        toggle = 'nav__toggle',
        // Properties
        listScrollTop = '--cwf-nav__list--scroll-top',
        listScrollBottom = '--cwf-nav__list--scroll-bottom'
    } = {}) {
        super({
            prefix,
            classes: {
                container,
                controller,
                hamburger,
                iconRotate,
                item,
                itemHasDropdown,
                itemIsCurrent,
                itemIsExpanded,
                itemIsParentOfCurrent,
                link,
                list,
                listLevel,
                nav,
                scrollable,
                modal,
                subNav,
                toggle
            }
        });

        // Set the desktop breakpoint,...
        this.desktopBreakpoint = desktopBreakpoint;
        // ... list level regular expression,...
        this.classes.listLevel = new RegExp(this.classes.listLevel + '?(\\d)');
        // ... and properties
        this.properties = {
            listScrollTop,
            listScrollBottom
        };

        // Bind this to all event methods that need the class context
        this.normalizeReferences = this.normalizeReferences.bind(this);
        this.keyboardNavigation = this.keyboardNavigation.bind(this);
        this.toggleDropdownMenu = this.toggleDropdownMenu.bind(this);
        this.toggleMainMenu = this.toggleMainMenu.bind(this);

        // Register the toggle scroll lock function to this component
        this.toggleScrollLock = toggleScrollLock.bind(this);
    }

    // Normalize a nav reference
    normalizeReferences(nav) {
        // Initialize a reference object...
        let reference = {};
        // ... and store the nav as the element
        reference.element = nav;

        // Store whether this nav is a sub nav,...
        reference.isSubNav = nav.classList.contains(this.classes.subNav);
        // ... its lists,...
        reference.lists = Array.from(nav.querySelectorAll(this.selectors.list));
        // ... items,...
        reference.items = Array.from(nav.querySelectorAll(this.selectors.item));
        // ... toggles,...
        reference.toggles = Array.from(
            nav.querySelectorAll(this.selectors.toggle)
        );
        // ... and links
        reference.links = Array.from(nav.querySelectorAll(this.selectors.link));

        // If the nav is a sub nav, return the reference object as is
        if (reference.isSubNav) return reference;

        // Otherwise, also store its hamburger button,...
        reference.hamburger = nav.querySelector(this.selectors.hamburger);
        // ... container,...
        reference.container = nav.querySelector(this.selectors.container);
        // ... and controller
        reference.controller = nav.querySelector(this.selectors.controller);

        // Finally, return the reference object
        return reference;
    }

    // Get all references to the navs and their lists/items
    getReferences() {
        // Attempt to grab all navs from the page...
        const navs = Array.from(document.querySelectorAll(this.selectors.nav));
        // ... and if none exist, do nothing else
        if (!navs) return;

        // Otherwise, normalize/store the references to these navs
        this.references = navs.map(this.normalizeReferences);
    }

    // Get an item's toggle
    getToggle(item) {
        return Array.from(item.children).find((child) =>
            child.matches(this.selectors.toggle)
        );
    }

    // Add the `--has-dropdown` item class to any drop-down items without it
    indicateHasDropdown(item) {
        // If the item already has the `--has-dropdown` item class, return the item
        if (item.classList.contains(this.classes.itemHasDropdown)) return item;

        // Attempt to grab the item's toggle...
        const toggle = this.getToggle(item);
        // ... and if none exist, return the item
        if (!toggle) return item;

        // Othwerwise, add the `--has-dropdown` item class to the item...
        item.classList.add(this.classes.itemHasDropdown);
        // ... and return it
        return item;
    }

    // Attempt to find/indicate the current item of a nav
    findCurrentItem(items) {
        // Grab the full/relative path of the current page...
        const { href, pathname } = window.location,
            // ... and try to find an item with a link with an HREF that matches
            currentItem = items.find((item) => {
                // Attempt to grab the item's link...
                const link = item.querySelector(this.selectors.link);
                // ... and if it doesn't exist...
                if (!link) return false;
                // ... or its href doesn't match the full/relative path, return false
                if (link.href !== href && link.href !== pathname) return false;

                // Otherwise, return true
                return true;
            });

        // If no item was found, return undefined
        if (!currentItem) return undefined;

        // Grab the current item's link
        const currentLink = currentItem.querySelector(this.selectors.link);

        // Otherwise, add the `--is-current` class to it,...
        currentItem.classList.add(this.classes.itemIsCurrent);
        // ... indicate via ARIA that this its link goes to the current page,...
        currentLink.setAttribute('aria-current', 'page');
        // ... and return it
        return currentItem;
    }

    // Find the parent items of the current item
    findParentsOfCurrent(item) {
        // Get the parent item of the current item...
        let parent = item.parentNode.parentNode;
        // ... and initialize a parents array
        let parents = [];

        // While there's a parent item that's an <li> and not a nav controller,...
        while (
            parent &&
            parent.tagName === 'LI' &&
            !parent.classList.contains(this.classes.controller)
        ) {
            // ... push it to the parents array...
            parents.push(parent);
            // ... and recurse up to the next parent item
            parent = parent.parentNode.parentNode;
        }

        // Finally, return all parents
        return parents;
    }

    // Indicate the current item tree
    indicateCurrentItemTree(currentItem, isSubNav) {
        // Find all parent items of the current item...
        const parents = this.findParentsOfCurrent(currentItem);
        // ... and for each,...
        parents.forEach((parent) => {
            // ... add the current and parent-of-current classes to it
            parent.classList.add(
                this.classes.itemIsCurrent,
                this.classes.itemIsParentOfCurrent
            );
        });

        // If the current navigation is a main-nav and the viewport is not at desktop size, or it's a sub nav, do nothing else
        if (!isSubNav && !(window.innerWidth < this.desktopBreakpoint)) return;

        // Create an array of current items from the current item and its parents...
        const currentItems = [currentItem, ...parents];

        // ... and for each,...
        currentItems.forEach((item) => {
            // ... expand it
            item.classList.add(this.classes.itemIsExpanded);

            // Next, attempt to find its toggle...
            const toggle = this.getToggle(item);
            // ... and if it doesn't exist...
            if (!toggle) return;
            // ... or it's not visible, do nothing else
            if (window.getComputedStyle(toggle).display !== 'block') return;

            // Otherwise, rotate its icon
            this.toggleExpanded(toggle, true);
        });
    }

    // Indicate the current items
    indicateCurrentItems({ items, isSubNav }) {
        // Either store or find the current item...
        const currentItem =
            items.find((item) => {
                return item.classList.contains(this.classes.itemIsCurrent);
            }) || this.findCurrentItem(items);

        // ... and if one was stored, indicate its current tree
        if (currentItem) this.indicateCurrentItemTree(currentItem, isSubNav);
    }

    // Set the toggle's "aria-expanded" attribute
    toggleExpanded(toggle, value) {
        // If there's no toggle, do nothing else...
        if (!toggle) return;
        // ... otherwise, set its "aria-expanded" attribute to the provided value
        toggle.setAttribute('aria-expanded', value);
    }

    // Collapse/expand dropdown menus
    toggleDropdownMenu({ type, currentTarget }, expand) {
        // Check whether the current target is a toggle...
        const isItem = currentTarget.classList.contains(this.classes.item);
        // ... and store the item...
        const item = isItem ? currentTarget : currentTarget.parentElement;
        // ... and the toggle acocordingly
        const toggle = this.getToggle(item);

        // Grab the desktop breakpoint
        const { desktopBreakpoint } = this;
        // ... and if the window isn't at desktop size when triggered by hovering, do nothing else
        if (
            ['mouseenter', 'mouseleave'].includes(type) &&
            !(window.innerWidth > desktopBreakpoint)
        )
            return;

        // Initialize a state and focus variable...
        let state, focus;
        switch (type) {
            case 'mouseenter':
                // ... and for 'mouseeneter' events, set state to true and focus to false,...
                state = true;
                focus = false;
                break;
            case 'mouseleave':
                // ... for 'mouseleave' events, set both to false,...
                state = false;
                focus = false;
                break;
            default:
                // ... otherwise, set both to the optional expand variable
                state = expand;
                focus = expand;
        }

        // Check whether the item is expanded or not...
        const expanded = item.classList.contains(this.classes.itemIsExpanded);
        // ... and whether to force it open/close or toggle it
        const value = typeof state === 'boolean' ? state : !expanded;

        // Toggle the item's expand class...
        item.classList.toggle(this.classes.itemIsExpanded, value);
        // ... and the toggle's "aria-expanded" attribute
        this.toggleExpanded(toggle, value);

        // If nothing is to be focused, do nothing else
        if (!focus) return;

        // Grab the list and its first link from the current target...
        const list = item.querySelector(this.selectors.list);
        const firstLink = list.querySelector(this.selectors.link);
        // ... and focus it
        firstLink.focus();
    }

    // Focus the previous/next link (with options to collapse the to-be-focused link's parent item)
    focusLink(direction, links, from, collapse = false) {
        // Store the first/last links,...
        const firstLink = links[0],
            lastLink = links[links.length - 1];

        // If the direction is "first", focus the first link...
        if (direction === 'first') return firstLink.focus();
        // ... and if the direction is "last", focus the last link
        if (direction === 'last') return lastLink.focus();

        // Check whether the from element is an item...
        const isItem = from.classList.contains(this.classes.item),
            // ... and get the current link accordingly,...
            current = isItem ? from.querySelector(this.selectors.link) : from,
            // ... and get the index of the current link
            index = links.indexOf(current);

        // Initialize storage for a link to compare the current link to,...
        let compare,
            // ... a link to wrap to,,,
            wrap,
            // ... and the index of the sibling link to move to
            sibling;

        // Dependending on the direction provided...
        switch (direction) {
            case 'previous':
                // Previous = if the current link is the first link, wrap to the last link, otherwise move to the previous sibling link
                compare = firstLink;
                wrap = lastLink;
                sibling = index - 1;
                break;
            case 'next':
                // Next = if the current link is the last link, wrap to the first link, otherwise move to the next sibling link
                compare = lastLink;
                wrap = firstLink;
                sibling = index + 1;
        }
        // ... change what link should be focused
        const focusable = current === compare ? wrap : links[sibling];

        // If collapse has been enabled,...
        if (collapse) {
            // ... get the parent item of the link to be focused...
            const item = focusable.parentElement;
            // ... and collapse it if open
            this.toggleDropdownMenu({ currentTarget: item }, false);
        }

        // Finally, focus the appropriate link
        return focusable.focus();
    }

    // Focus an item's element
    focusItemElement(element, item) {
        // Grab the item element...
        const target = item.querySelector(this.selectors[element]);
        // ... and focus it
        target.focus();
    }

    // Provide advanced keyboard navigation
    keyboardNavigation(event) {
        // Pull the type and current target from the event
        const { type, currentTarget } = event;

        // Either add/remove a keydown event listener when the current target is focused/blurred respectively...
        switch (type) {
            case 'focus':
                currentTarget.addEventListener(
                    'keydown',
                    this.keyboardNavigation
                );
                break;
            case 'blur':
                currentTarget.removeEventListener(
                    'keydown',
                    this.keyboardNavigation
                );
        }
        // ... and if the event is not a keydown, do nothing else
        if (type !== 'keydown') return;

        // Pull the key from the event...
        const { key } = event;
        // ... and if it's tab...
        if (key === 'Tab') return;
        // ... or it's not an arrow key/home/end/escape,...
        if (
            ![
                'ArrowLeft',
                'ArrowUp',
                'ArrowRight',
                'ArrowDown',
                'Home',
                'End',
                'Escape'
            ].includes(key)
        )
            return;
        // ... or if there's an outstanding active composition, do nothing else
        if (event.isComposing) return;

        // Prevent the default behavior
        event.preventDefault();

        // Store whether the current target is a toggle or not
        const isToggle = currentTarget.classList.contains(this.classes.toggle);

        // Get the links and sub nav check of the nav containing the current target
        const { links, isSubNav } = this.references.find((nav) => {
            // If the current target is not a toggle, find a nav with links containing it...
            if (!isToggle) return nav.links.includes(currentTarget);
            // ... otherwise, find a nav with toggles containing it
            return nav.toggles.includes(currentTarget);
        });

        // Store all visible, focusable links,...
        const visibleLinks = links.filter((link) => link.offsetParent !== null),
            // ... the current target's parent (item),...
            item = currentTarget.parentElement,
            // ... if the item has a dropdown,...
            hasDropdown = item.classList.contains(this.classes.itemHasDropdown),
            // ... if the item is expanded,...
            isExpanded = item.classList.contains(this.classes.itemIsExpanded),
            // ... the item's parent (list),...
            list = item.parentElement,
            // ... the list's level,..
            levelMatch = list.className.match(this.classes.listLevel),
            level = levelMatch && levelMatch.length ? Number(levelMatch[1]) : 0,
            // ... if the list is not the first level within the nav,...
            isNotTopLevel = isSubNav ? level !== 2 : level !== 1,
            // ... and store focusable links within the same list
            sameListLinks = links.filter(
                (link) => link.parentElement.parentElement === list
            );

        // Main navigation on desktop
        if (!isSubNav && !(window.innerWidth < this.desktopBreakpoint)) {
            // Level 1
            if (level === 1) {
                // Toggles
                if (isToggle) {
                    switch (key) {
                        case 'ArrowLeft':
                            // Level 1, arrow left = focus the current item's link
                            return this.focusItemElement('link', item);
                        case 'ArrowUp':
                            // Level 1, arrow up = collapse the dropdown
                            return this.toggleDropdownMenu(
                                { currentTarget },
                                false
                            );
                        case 'ArrowRight':
                            // Level 1, arrow right = focus the next same list link from the current item's link
                            return this.focusLink(
                                'next',
                                sameListLinks,
                                item,
                                true
                            );
                    }
                }

                switch (key) {
                    case 'ArrowLeft':
                        // Level 1, arrow left = focus previous link within the same list
                        return this.focusLink(
                            'previous',
                            sameListLinks,
                            currentTarget
                        );
                    case 'ArrowUp':
                        // Level 1, arrow up = nothing
                        return;
                    case 'ArrowRight':
                        // Level 1, arrow right = focus next link within the same list
                        return this.focusLink(
                            'next',
                            sameListLinks,
                            currentTarget
                        );
                }
                // Level 1, arrow down
                if (key === 'ArrowDown') {
                    // Level 1, arrow down, has dropdown = expand dropdown and focus first link
                    if (hasDropdown)
                        return this.toggleDropdownMenu({ currentTarget }, true);
                    // Level 1, arrow down = nothing
                    return;
                }
            }

            // Level 2
            if (level === 2) {
                // Toggles
                if (isToggle) {
                    switch (key) {
                        case 'ArrowLeft':
                            // Level 2, arrow left = focus the current item's link
                            return this.focusItemElement('link', item);
                        case 'ArrowUp':
                            // Level 2, arrow up = focus previous link within the same list from the current item's link
                            return this.focusLink(
                                'previous',
                                sameListLinks,
                                item
                            );
                        case 'ArrowRight':
                            // Level 2, arrow right = open the dropdown
                            return this.toggleDropdownMenu(
                                { currentTarget },
                                true
                            );
                        case 'ArrowDown':
                            // Level 2, arrow down = focus next link within the same list from current item's link
                            return this.focusLink('next', sameListLinks, item);
                    }
                }

                // Level 2, arrow right, has dropdown = expand dropdown and focus first link
                if (key === 'ArrowRight' && hasDropdown)
                    return this.toggleDropdownMenu({ currentTarget }, true);

                // Level 2, arrow up, is first link of same list = focus previous visible link and collapse dropdown
                if (key === 'ArrowUp' && currentTarget === sameListLinks[0])
                    return this.focusLink(
                        'previous',
                        visibleLinks,
                        currentTarget,
                        true
                    );
            }

            // Level 3, arrow left = focus previous visible link from first link of the same list and collapse dropdown
            if (level === 3 && key === 'ArrowLeft')
                return this.focusLink(
                    'previous',
                    visibleLinks,
                    sameListLinks[0],
                    true
                );

            // Defaults
            switch (key) {
                case 'ArrowUp':
                    // Arrow up = focus previous link within the same list
                    return this.focusLink(
                        'previous',
                        sameListLinks,
                        currentTarget
                    );
                case 'ArrowDown':
                    // Arrow down = focus next link within the same list
                    return this.focusLink('next', sameListLinks, currentTarget);
                case 'Home':
                    // Home = focus first link within the same list
                    return this.focusLink('first', sameListLinks);
                case 'End':
                    // End = focus last link within the same list
                    return this.focusLink('last', sameListLinks);
            }
        }

        // All toggles
        if (isToggle) {
            // Arrow up
            if (key === 'ArrowUp') {
                // Arrow up, item is expanded = collapse the dropdown
                if (isExpanded)
                    return this.toggleDropdownMenu({ currentTarget }, false);
                // Arrow up = focus the previous visible link from the current item's link
                return this.focusLink('previous', visibleLinks, item, true);
            }

            // Defaults
            switch (key) {
                case 'ArrowLeft':
                    // Arrow left = focus the current item's link
                    return this.focusItemElement('link', item);
                case 'ArrowDown':
                    // Arrow down = expand the dropdown
                    return this.toggleDropdownMenu({ currentTarget }, true);
            }
        }

        // All navigation
        switch (key) {
            case 'ArrowUp':
                // Arrow up = focus previous visible link
                return this.focusLink('previous', visibleLinks, currentTarget);
            case 'ArrowDown':
                // Arrow down = focus next visible link
                return this.focusLink('next', visibleLinks, currentTarget);
            case 'Home':
                // Home = focus first visible link
                return this.focusLink('first', visibleLinks);
            case 'End':
                // End = focus last visible link
                return this.focusLink('last', visibleLinks);
        }

        // Not top level list, escape = focus previous visible link from first link of same list and collapse
        if (isNotTopLevel && key === 'Escape')
            return this.focusLink(
                'previous',
                visibleLinks,
                sameListLinks[0],
                true
            );

        // Arrow right, has dropdown = focus the item's toggle
        if (key === 'ArrowRight' && hasDropdown)
            return this.focusItemElement('toggle', item);
    }

    // Bind to every nav's toggle's click event
    togglesOnClickFocusBlur({ toggles }) {
        // If it has none, do nothing else
        if (!toggles.length) return;

        // Otherwiser, for each toggle,...
        toggles.forEach((toggle) => {
            // ... toggle its sub menu when clicked, and provide advanced keyboard navigation when focused/blurred
            toggle[this.listener]('click', this.toggleDropdownMenu);
            toggle[this.listener]('focus', this.keyboardNavigation);
            toggle[this.listener]('blur', this.keyboardNavigation);
        });
    }

    // Bind to every link's focus/blur events
    linksOnFocusBlur({ links }) {
        // If no links exist, do nothing else
        if (!links.length) return;

        // Otherwise, for each link,...
        links.forEach((link) => {
            // ... provide advanced keyboard nevigation when focused (and remove it when blurred)
            link[this.listener]('focus', this.keyboardNavigation);
            link[this.listener]('blur', this.keyboardNavigation);
        });
    }

    // Bind to every main nav's item's mouse enter/leave event if they have dropdowns
    itemsWithDropdownsOnHover({ items }) {
        // If no items exist, do nothing else
        if (!items.length) return;

        // Otherwise, filter the items that have dropdowns...
        items
            .filter((item) =>
                item.classList.contains(this.classes.itemHasDropdown)
            )
            .forEach((item) => {
                // ... and toggle its dropdown menu on mouse enter/leave
                item[this.listener]('mouseenter', this.toggleDropdownMenu);
                item[this.listener]('mouseleave', this.toggleDropdownMenu);
            });
    }

    // Start or stop core functionality
    allFunctionality() {
        // For each nav,...
        this.references.forEach((nav) => {
            // ... indicate the current items and their trees...
            this.indicateCurrentItems(nav);
            // ... bind to every nav's toggle's click event,...
            this.togglesOnClickFocusBlur(nav);
            // ... and bind to every link's focus/blur events
            this.linksOnFocusBlur(nav);
        });
    }

    // Collapse/expand the main menu
    toggleMainMenu({ currentTarget }) {
        // Change the default behavior whether the current target is a link or not
        const isLink = currentTarget.classList.contains(this.classes.link),
            listener = super.stateListener(!isLink);

        // Get the nav of the current target...
        const nav = this.references.find((nav) => {
            // If the current target is not a link, find a nav with a hamburger button or container that matches the current target...
            if (!isLink)
                return (
                    nav.hamburger === currentTarget ||
                    nav.container === currentTarget
                );
            // ... otherwise, find a nav with links that include the current target
            return nav.links.includes(currentTarget);
        });

        const hamburgerAriaLabel = nav.hamburger.getAttribute('aria-label');
        const hamburgerAriaLabelText = hamburgerAriaLabel.includes('Open')
            ? hamburgerAriaLabel.replace('Open', 'Close')
            : hamburgerAriaLabel.replace('Close', 'Open');
        const hamburgerText = nav.hamburger.textContent.includes('Menu')
            ? 'Close'
            : 'Menu';

        // Toggle the modal class on the nav element...
        nav.element.classList.toggle(this.classes.modal);
        // ... and toggle scrolling functionality
        this.toggleScrollLock();

        nav.hamburger.setAttribute('aria-label', hamburgerAriaLabelText);
        // ... toggle the nav's hamburger button's text between "Menu" and "Close",...
        nav.hamburger.textContent = hamburgerText;
        // ... and toggle the main menu when a link is clicked
        nav.links.forEach((link) => {
            link[listener]('click', this.toggleMainMenu);
        });
    }

    // Stop event propagation
    stopPropagation(event) {
        event.stopPropagation();
    }

    // Bind to a main nav's hamburger button click event
    hamburgerOnClick({ hamburger }) {
        // If no hamburger button exists, do nothing else
        if (!hamburger) return;

        // Otherwise, toggle the main menu when its clicked
        hamburger[this.listener]('click', this.toggleMainMenu);
    }

    // Bind to the nav container's click event
    containerOnClick({ container, controller }) {
        // If no container or controller exist, do nothing else
        if (!container || !controller) return;

        // Otherwise, toggle the main menu when the overflow container is clicked...
        container[this.listener]('click', this.toggleMainMenu);
        // ... and stop event propagation if the nav controller is clicked
        controller[this.listener]('click', this.stopPropagation);
    }

    // Start or stop the main navigation functionality
    mainFunctionality() {
        // For each main nav...
        this.references
            .filter(({ isSubNav }) => !isSubNav)
            .forEach((nav) => {
                // ... bind to its item's mouse enter/leave event if they have dropdowns,...
                this.itemsWithDropdownsOnHover(nav);
                // ... hamburger's click event,...
                this.hamburgerOnClick(nav);
                // ... and nav container's click event
                this.containerOnClick(nav);
            });
    }

    // Adjusts the opacity of the visual scroll indicators of a nav list based on the scroll position
    indicateScrollDirection({ target }) {
        // Grab the relavent scroll information from the target,...
        const { scrollTop, scrollHeight, clientHeight } = target,
            // ... how far it's scrolled from the top,
            top = Math.round(scrollTop);
        // ... and the maximum distance of scrolling
        let max = scrollHeight - clientHeight;

        // Normalize the maximum distance to zero (if lower)
        if (max < 0) max = 0;

        // Figure out the percent scrolled from the top/bottom
        const percentFromTop = (top / max || 0).toFixed(2),
            percentFromBottom = ((max - top) / max || 0).toFixed(2);

        // Set the scroll top...
        target.style.setProperty(this.properties.listScrollTop, percentFromTop);
        // ... and scroll bottom CSS custom property of the list to correspond with opacity
        target.style.setProperty(
            this.properties.listScrollBottom,
            percentFromBottom
        );
    }

    scrollToCurrentItem(list) {
        const current = list.querySelector(this.selectors.itemIsCurrent);

        if (!current) return;

        const { offsetTop } = current;

        list.scrollTop = offsetTop;
    }

    // Adds visual indicators that a nav list is scrollable
    indicateScrollable({ lists }) {
        // If no lists exists, do nothing else
        if (!lists.length) return;

        // For each list,...
        lists.forEach((list) => {
            // If the list isn't scrollable, return it as is
            if (!list.classList.contains(this.classes.scrollable)) return list;

            // Otherwise, scroll to the current item...
            this.scrollToCurrentItem(list);
            // ... and indicate the scroll direction up front...
            this.indicateScrollDirection({ target: list });
            // ... and whenever the list is scrolled thereafter
            list[this.listener](
                'scroll',
                this.indicateScrollDirection.bind(this)
            );
        });
    }

    // Start or stop the sub navigation functionality
    subFunctionality() {
        // For each sub nav...
        this.references
            .filter(({ isSubNav }) => isSubNav)
            .forEach(this.indicateScrollable.bind(this));
    }

    // Mount/unmount the navigation functionality
    mount(run) {
        super.mount(run);

        // If unmounting and no container exists,...
        if (!run && !this.references.length) {
            // ... simply delete the settings/references...
            delete this.settings;
            delete this.references;
            // ... and do nothing else
            return;
        }

        // If mounting, get all references
        if (run) this.getReferences();

        // Handle all global/sepecific nav functionalities
        this.allFunctionality();
        this.mainFunctionality();
        this.subFunctionality();

        // If unmounting,...
        if (!run) {
            // ... delete the settings...
            delete this.settings;
            // ... and references
            delete this.references;
        }
    }
}