/* Start Tech Specs component JS */
// Calling "techSpecsSetState" function to set state to sticky, toggle classes and set attibutes...
function techSpecsSetState(element, techSpecsMain, techSpecsFootnote, toggleClass, btnExpand, btnCollapse) {
    let techSpecs = document.querySelector(".tech-specs");
    techSpecsMain?.classList.toggle(toggleClass);
    techSpecsFootnote?.classList.toggle(toggleClass);
    if (element.classList.contains(btnCollapse)) {
        techSpecs.querySelector(".tech-specs-cta .btn").classList.remove("sticky-bottom");
        techSpecsMain.setAttribute("tabindex", "-1");
        techSpecsMain.setAttribute("aria-hidden", "true");
        var expandLabel = element.getAttribute("data-expand-label");
        element.classList.remove(btnCollapse);
        element.classList.add(btnExpand);
        element.setAttribute("aria-expanded", "false");
        element.setAttribute("aria-label", expandLabel);
        techSpecs.scrollIntoView(true);
    } else {
        techSpecs.querySelector(".tech-specs-cta .btn").classList.add("sticky-bottom");
        element.classList.add(btnCollapse);
        element.classList.remove(btnExpand);
     var collapseLabel = element.getAttribute("data-collapse-label");
        element.setAttribute("aria-expanded", "true");
        element.setAttribute("aria-label", collapseLabel);
        techSpecsMain.setAttribute("tabindex", "0");
        techSpecsMain.setAttribute("aria-hidden", "false");
        techSpecsMain.focus();
    }
}

// Calculate button position whether its exceeds window/component height
function btnPosition(techSpecs, windowsHeight) {
    const bottom = techSpecs.getBoundingClientRect().bottom;
    const contentHeight = techSpecs.querySelector(".tech-specs-banner");
    const top = techSpecs.getBoundingClientRect().top + (contentHeight.clientHeight + 30);
    let btnGrp = techSpecs.querySelector(".tech-specs-cta .btn");
    if ((windowsHeight >= bottom) && (windowsHeight >= top)) {
        if (btnGrp.classList.contains("sticky-bottom")) {
            btnGrp.classList.remove("sticky-bottom");
        }
    }
    else if(btnGrp.classList.contains("btn-show-less")) {
        if(windowsHeight >= top){
            btnGrp.classList.add("sticky-bottom");
        }
        else{
            btnGrp.classList.remove("sticky-bottom");
        }
    }
}

// Function to move focus in visible postion if its behind sticky button position
function focusFunction(activelink) {
    let linkPosition = activelink.getBoundingClientRect().top;
    let windowHeight = window.innerHeight;
    if ((windowHeight - 100) < linkPosition) {
        window.scrollBy(0, 110);
    }
}

// Calling the function on DOM load
document.addEventListener("DOMContentLoaded", function () {
    // Initializing parent class and its child elements
    let techSpecs = document.querySelector(".tech-specs");
    let techSpecsMain = techSpecs.querySelector(".ts-main");
    let techSpecsFootnote = techSpecs.querySelector(".ts-footnotes");
    let techSpecsBtn = techSpecs.querySelector(".tech-specs-cta .btn");
    const windowsHeight = window.innerHeight;

    // On scoll, get the bottom position and if exceeds the height of window or inside the window toggle "sticky-bottom" class
    document.addEventListener('scroll', () => {
        btnPosition(techSpecs, windowsHeight);
    });

    // Calling the function on button click to change the expand and collapse state
    techSpecsBtn.addEventListener("click", function () {
        techSpecsSetState(this, techSpecsMain, techSpecsFootnote, "hide", "btn-expand", "btn-show-less");
    });

    // Calling the function on resize to check whether the button position is exceeds window/component height. 
    window.addEventListener("resize", function () {
        btnPosition(techSpecs, windowsHeight);
    });

    // Get focus element/active element in DOM
    document.addEventListener("focusin", () => {
        let activelink = document.activeElement;
        focusFunction(activelink);
    });
});
/* END Tech Specs component JS */
/* Creating anchor elements for each superscript in the body */
function changeSupToAnchor() {
	try {
		var getInnerTxt = "";
		var convertedHtml = "";
		var supItemsArray = [];
		$('sup:not(.no-link)').each(function () {
			getInnerTxt = $(this).clone().children('.sr-text').remove().end().text().trim();
			getInnerTxt = getInnerTxt.replace('*(', '');
			getInnerTxt = getInnerTxt.replace(')', '');
			supItemsArray = getInnerTxt.split(', ');
			for (var itr = 0; itr < supItemsArray.length; itr++) {
				convertedHtml += "<a aria-label='Footnote " + supItemsArray[itr] + "' href="http://approjects.co.za/?big=javascript:void(0);" class='c-hyperlink supBLink'>" +
					"<span class='supText'>" + supItemsArray[itr] + "</span></a>" + "<span>, </span>";
			}
			$(this).html(convertedHtml);
			convertedHtml = "";
		});
		$('sup').find('span:last').remove();

		var getFootSup = $('.list-unstyled  li a.superscript');
		getFootSup.attr('href','javascript:void(0);');
		getFootSup.addClass('supLink');
		getFootSup.each(function() {
		    var thisHasNoSupFn = $(this).find(".supFn").length == 0 ? true : false;
		    if(thisHasNoSupFn) {
			    $(this).wrapInner("<span class='supFn'></span>");
			}
		});

	}
	catch (e) {
		console.log(e);
	}
};
/* Hiding footnotes in footer, that are not available in the body */
function noSuperScript() {
	try {
		var scriptPageURL = window.location.href;
		var panelSuperScripts = [];
		var tooltipSuperScripts = [];
		$('sup .supText:visible').not('.ts-footnotes li sup').each(function () {
			var textSuperScript = $(this).text().trim();
			panelSuperScripts.push(textSuperScript);
		});
		panelSuperScripts = $.unique(panelSuperScripts);
		$('.c-tooltip sup').each(function () {
			var textSuperScript = $(this).text().trim();
			tooltipSuperScripts.push(textSuperScript);
		});
		tooltipSuperScripts = $.unique(tooltipSuperScripts);
		if (panelSuperScripts.length == 0) {
			$('.ts-footnotes').addClass('d-none');
		} else {
			if ($('.ts-footnotes').hasClass('d-none')) {
				setTimeout(function () {
					$('.ts-footnotes').removeClass('d-none');
				}, 500)
			}
		}
		$('.ts-footnotes li').each(function () {
			var footnoteText = $(this).find('.supLink .supFn').text().trim();
			var footnoteScript = footnoteText.substring(1, footnoteText.length - 1);
			if ($.inArray(footnoteScript, panelSuperScripts) == -1) {
				$(this).addClass('d-none');
			} else {
				if ($(this).hasClass('d-none')) {
					$(this).removeClass('d-none');
				}
			}
			if ($(this).hasClass('context-glyph-tile')) {
				$(this).removeClass('d-none');
			}
		});
	}
	catch (e) {
		console.log(e);
	}
};

/* Click functionality on the body superscript anchor elements */
$(document).on('click', '.supBLink', function (e) {
	try {
		$('li').blur();
		var innerContent = $(this).find('.supText').html();
		if ($('.lastClicked').length > 0) {
			$('.lastClicked').removeClass('lastClicked');
		}
		$(this).addClass('lastClicked');
		var referencedFnSup = "";

		$('.supLink span').each(function () {
			var mySupString = $(this).text();
			var mySupNumber = mySupString.substring(1, mySupString.length - 1);
			if (mySupNumber === innerContent) {
				referencedFnSup = $(this);
				referencedFnSup.parent().parent().attr('tabindex', '1');
			/* Fixed Keyboard focus loss upon invoking Superscript present in the page and focus indicator should be clearly visible*/
                referencedFnSup.parent().parent().find(".superscript.supLink").attr('tabindex', '1');
                referencedFnSup.parent().parent().focus();
                referencedFnSup.parent().parent().siblings().attr('tabindex', '-1');
			}
		});
	}
	catch (e) {
		console.log(e);
	}
});
/* Click functionality on the footnote superscript anchor elements */
$(document).on('click', '.supLink', function (e) {
	try {
		var lastClickedSup = $('.lastClicked');
		var innerContent = $(this).find('.supFn').html();
		var innerSupContent = innerContent.substring(1, innerContent.length - 1);
		var referencedBdSup = "";
		if (innerSupContent == $('.lastClicked .supText').html()) {
			lastClickedSup.trigger("focus");
			lastClickedSup.removeClass('lastClicked');
		}
		else {
			$('sup .supText').each(function () {
				if (innerSupContent === $(this).html()) {
					referencedBdSup = $(this);
					referencedBdSup.parent().trigger("focus");
				}
			});
		}
	}
	catch (e) {
		console.log(e);
	}
});


/*
 From your component invoke
  changeSupToAnchor();
  noSuperScript();

  It should be invoked on document ready and from the click event which loads more footnotes in the DOM.
*/