let pointerNumber = 0;
$mo = jQuery;

function startTour(stepIndex) {
    if (!moTour.tourData || !moTour.tourData.length) return;

    if (
        Object.keys(moTour.currentPage).length > 1 ||
        ($mo("#moblock").show(), true)
    ) {
        createCard(stepIndex);
    }
}

function createCard(stepIndex) {

    /* ---- SAFETY CHECK ---- */
    if (!moTour.tourData || !moTour.tourData[stepIndex]) {
        resetTour();
        tourComplete();
        return;
    }

    let currentStepData = moTour.tourData[stepIndex];

    /* ---- TARGET VISIBILITY CHECK ---- */
    if (
        currentStepData.targetE &&
        !$mo("#" + currentStepData.targetE).length ||
        (
            currentStepData.targetE &&
            !$mo("#" + currentStepData.targetE).is(":visible")
        )
    ) {
        stepIndex++;

        if (!moTour.tourData[stepIndex]) {
            resetTour();
            tourComplete();
            return;
        }

        createCard(stepIndex);
        return;
    }

    let cardHtml =
        '<div id="mo-card" class="mo-card mo-' + currentStepData.cardSize + '">' +
            '<div class="mo-tour-arrow mo-point-' + currentStepData.pointToSide + '">' +
                '<i style="color:#ffffff;position: relative;" class="mo-dashicons dashicons dashicons-arrow-' + currentStepData.pointToSide + '"></i>' +
            '</div>' +
            '<div class="mo-tour-content-area mo-point-' + currentStepData.pointToSide + '">' +
                '<div class="mo-tour-title">' + currentStepData.titleHTML + '</div>' +
                '<div class="mo-tour-content">' + currentStepData.contentHTML + '</div>' +
                '<div id="tour_svg">' +
                    '<img ' + (currentStepData.img ? "" : "hidden") + ' src="' + (currentStepData.img || "") + '" style="margin:auto;" alt="">' +
                '</div>' +
                '<div class="mo-tour-button-area flex flex-1 gap-mo-6"></div>' +
                '<div hidden class="mo-tour-card-bottom"></div>' +
            '</div>' +
        '</div>';

    let primaryButtonHtml =
        '<input type="button" class="mowc-button inverted mo-tour-primary-btn" value="' +
        currentStepData.buttonText +
        '">';

    $mo("#moblock").empty();
    $mo(cardHtml).insertAfter("#moblock");

    $mo(".mo-tour-button-area").append(
        '<input type="button" class="mowc-button secondary mo-skip-btn" style="margin-left:30px; margin-right:30px;" value="Skip Tour">'
    );

    $mo(".mo-tour-button-area").append(primaryButtonHtml);

    if (!currentStepData.pointToSide || currentStepData.pointToSide === "center") {
        $mo(".mo-card").css("box-shadow", "0px 0px 0px 3px #979393");
    }

    if (currentStepData.targetE && $mo("#" + currentStepData.targetE).length) {
        getPointerPosition(
            currentStepData.targetE,
            currentStepData.pointToSide
        );
    }

    /* ---- NEXT BUTTON ---- */
    $mo(".mo-tour-primary-btn").off("click").on("click", function () {
        $mo(".mo-target-index").removeClass("mo-target-index");
        $mo(".mo-card").remove();
        createCard(stepIndex + 1);
    });

    /* ---- SKIP BUTTON ---- */
    $mo(".mo-skip-btn").off("click").on("click", function () {
        $mo(".mo-target-index").removeClass("mo-target-index");
        $mo(".mo-card").remove();
        resetTour();
        tourComplete();
    });
}

function getPointerPosition(targetElementId, pointToSide) {
    let targetEl = document.getElementById(targetElementId);
    let cardEl = document.getElementById("mo-card");

    if (!targetEl || !cardEl) return;

    let targetRect = targetEl.getBoundingClientRect();
    let cardRect = cardEl.getBoundingClientRect();
    let cardLeftPosition = 0;
    let cardTopPosition = 0;

    switch (pointToSide) {
        case "up":
            cardLeftPosition = targetRect.left + (targetRect.width - cardRect.width) / 2;
            cardTopPosition = targetRect.top + targetRect.height + 5;
            break;

        case "down":
            cardLeftPosition = targetRect.left + (targetRect.width - cardRect.width) / 2;
            cardTopPosition = targetRect.top - cardRect.height;
            break;

        case "left":
            cardLeftPosition = targetRect.left + targetRect.width;
            cardTopPosition = targetRect.top + (targetRect.height - cardRect.height) / 2;
            break;

        case "right":
            cardLeftPosition = targetRect.left - cardRect.width;
            cardTopPosition = targetRect.top + (targetRect.height - cardRect.height) / 2;
            break;
    }

    if (cardTopPosition < 0) {
        $mo(".mo-tour-arrow > i").css(
            "top",
            "calc(50% - 0.6em + " + cardTopPosition + "px)"
        );
        cardTopPosition = 0;
    }

    $mo(".mo-card").css({
        top: cardTopPosition + $mo(window).scrollTop() - 25,
        left: cardLeftPosition + $mo(window).scrollLeft() - 180,
        marginTop: "0",
        marginLeft: "0",
        position: "absolute"
    });

    $mo("#" + targetElementId).addClass("mo-target-index");

    targetEl.scrollIntoView({
        behavior: "smooth",
        block: "center",
        inline: "center"
    });
}

function resetTour() {
    pointerNumber = 0;
    $mo("#moblock").hide();
}

function tourComplete() {
    $mo.ajax({
        url: moTour.siteURL,
        type: "POST",
        data: {
            doneTour: true,
            pageID: moTour.pageID,
            security: moTour.tnonce,
            action: moTour.ajaxAction
        },
        crossDomain: true,
        dataType: "json"
    });
}

$mo(window).on("load", function () {
    if (!moTour.tourTaken) {
        startTour(pointerNumber);
    }

    $mo("#restart_tour_button").on("click", function () {
        resetTour();
        startTour(pointerNumber);
    });
});
