/*global window, $*/

function initMagicLine(headerRow) {
    'use strict';

    if (!headerRow || !document.querySelectorAll('.animation-follow').length) {
        return;
    }

    const mainHeader = document.querySelector('.animation-follow');
    const magicLine = headerRow.querySelector('.magic-line');
    const menuItems = headerRow.querySelectorAll('.menu > li:not(.btn)');
    const selectedMenuItem = headerRow.querySelector('.menu > .current-menu-item, .menu > .current-menu-ancestor');
    const stretchMode = !!document.querySelectorAll('.animation-follow-stretch').length;
    var magicLineLength = parseInt(mainHeader.dataset.lineLength) || 0;
    const linePosCenter = mainHeader.classList.contains('line-pos-center');
    const linePosLeft = mainHeader.classList.contains('line-pos-left');
    const linePosRight = mainHeader.classList.contains('line-pos-right');

    const moveLeft = function (left, right, oldRight) {
        magicLine.style.left = left + 'px';
        magicLine.style.right = oldRight + 'px';

        if (magicLine.classList.contains('show')) {
            setTimeout(function () {
                magicLine.style.right = right + 'px';
            }, 400);
        } else {
            magicLine.style.right = right + 'px';
        }
    };

    const moveRight = function (left, right, oldLeft) {
        magicLine.style.right = right + 'px';
        magicLine.style.left = oldLeft + 'px';

        if (magicLine.classList.contains('show')) {
            setTimeout(function () {
                magicLine.style.left = left + 'px';
            }, 400);
        } else {
            magicLine.style.left = left + 'px';
        }
    };

    const setPositionTo = function (el) {
        if (el) {
            const elPosLeft = getElementOffset(el, 'offsetLeft');
            const menuItemPadding = parseInt(getComputedStyle(document.documentElement).getPropertyValue('--header-menu-item-spacing'));
			const menuItemStyle = getComputedStyle(el);
			const paddingLeft = parseInt(menuItemStyle.getPropertyValue('padding-left'));
			const paddingRight = parseInt(menuItemStyle.getPropertyValue('padding-right'));
            var w = el.offsetWidth - paddingLeft - paddingRight;

            if (stretchMode) {
                var currentLeft = parseInt(magicLine.style.left),
                    currentRight = parseInt(magicLine.style.right),
                    newLeft = 0,
                    newRight = 0,
                    headerWidth = headerRow.offsetWidth;

                    if (magicLineLength) {
                        if (linePosLeft) {
                            newLeft = elPosLeft - getElementOffset(headerRow, 'offsetLeft');
                        } else if (linePosRight) {
                            newLeft = elPosLeft + w - magicLineLength;
                        } else if (linePosCenter) {
                            newLeft = elPosLeft - getElementOffset(headerRow, 'offsetLeft') + (w - magicLineLength) / 2;
                        }
                        newLeft -= menuItemPadding;
                        newRight = headerWidth - newLeft - magicLineLength;
                    } else {
                        newLeft = elPosLeft - getElementOffset(headerRow, 'offsetLeft');
                        newRight = headerWidth - newLeft - w;
                    }

                if (newLeft > currentLeft) {
                    moveRight(newLeft, newRight, currentLeft);
                } else {
                    moveLeft(newLeft, newRight, currentRight);
                }
            } else {
                var pos = elPosLeft - getElementOffset(headerRow, 'offsetLeft');
                if (magicLineLength) {
                    if (linePosRight) {
                        pos += w - magicLineLength;
                        if (pos < 0) {
                            pos = 0;
                        }
                    } else if (linePosCenter) {
                        pos += (w - magicLineLength) / 2;
                    }
                    magicLine.style.width = magicLineLength + 'px';
                } else {
                    magicLine.style.width = w + 'px';
                }

                magicLine.style.left = pos + 'px';
            }
        } else {
            magicLine.removeAttribute('style');
        }
    }

    if (selectedMenuItem) {
        setPositionTo(selectedMenuItem);
        setTimeout(function () {
            magicLine.classList.add('show');
        }, 0);
    }

    var linePositionTimeout = null;
    var oldActiveLink;
    var clearStyleTimeout = null;

    const handleMouseEnter = function () {
        magicLineLength = parseInt(mainHeader.dataset.lineLength) || 0;
        if (clearStyleTimeout) {
            clearTimeout(clearStyleTimeout);
        }
		var activeLink = headerRow.querySelector('.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor');
		setPositionTo(this || activeLink);

        setTimeout(function () {
            magicLine.classList.add('show');
        }, 0);
    };

    const handleMouseLeave = function () {
        const currentMenuItem = headerRow.querySelector('.menu > .current-menu-item, .menu > .current-menu-ancestor, .menu > .current_page_item, .menu > .current_page_ancestor');
        const target = currentMenuItem || false;

        if (target) {
            setPositionTo(target);
        } else {
            magicLine.classList.remove('show');
            clearStyleTimeout = setTimeout(function () {
                magicLine.removeAttribute('style');
                oldActiveLink = null;
            }, 300);
        }
    };

    menuItems.forEach(function (currentLink) {
        currentLink.addEventListener('mouseenter', handleMouseEnter);
    });

    headerRow.addEventListener('mouseleave', handleMouseLeave);

    const moveMagicLine = function () {
        clearTimeout(linePositionTimeout);
        var activeLink = headerRow.querySelector('.current-menu-item, .current-menu-ancestor, .current_page_item, .current_page_ancestor');

        if (activeLink && activeLink !== oldActiveLink) {
            if (oldActiveLink) {
                linePositionTimeout = setTimeout(function () {
                    setPositionTo(activeLink);
                }, 400);
            } else {
                handleMouseEnter();
            }
            oldActiveLink = activeLink;
        } else {
            handleMouseLeave();
        }
    }

    window.addEventListener('activeLinkChange', moveMagicLine);
    window.addEventListener('stickyHeaderOn', moveMagicLine);
    window.addEventListener('stickyHeaderOff', moveMagicLine);
}


window.addEventListener('load', function () {
    const headerRows = document.querySelectorAll('.animation-follow .mainmenu-row');
    if (!headerRows.length) {
        return;
    }

    headerRows.forEach(function (headerRow) {
        initMagicLine(headerRow);
    });

	const siteTitle = document.querySelector('.site-title.desktop');
	if (siteTitle) {
		initMagicLine(siteTitle);
	}
});