@model PantheonRA.BackOffice.Models.PrevNextKeyDisplayViewModel

<div class="prev-next-key-display @(string.IsNullOrEmpty(Model.KeyDisplayValue) ? "hidden" : "")">
    <i class="fa fa-chevron-left disabled" onclick="prevNavNeighbour(this)"></i>
    <span id="KeyDisplayValue" title="@(!string.IsNullOrEmpty(Model.KeyDisplayHint) ? Model.KeyDisplayHint : Loc.OpenListOfInvoices)" onClick="keyAction(this)">@Model.KeyDisplayValue</span>
    <i class="fa fa-chevron-right disabled" onclick="nextNavNeighbour(this)"></i>
</div>

<script>
    let prevNavigationLink = '@Html.Raw(Model.PrevNavigation)';
    let nextNavigationLink = '@Html.Raw(Model.NextNavigation)';
    let keyNavigationLink = '@Html.Raw(Model.KeyNavigation)';

    function refreshArrows(acKey, acKeyDisplay, docType) {
        if (acKey === '' || docType === '') return;

        prevNavigationLink = prevNavigationLink.replace(encodeURIComponent("{modelId}"), acKey);
        prevNavigationLink = prevNavigationLink.replace(encodeURIComponent("{docTypeId}"), docType);
        nextNavigationLink = nextNavigationLink.replace(encodeURIComponent("{modelId}"), acKey);
        nextNavigationLink = nextNavigationLink.replace(encodeURIComponent("{docTypeId}"), docType);

        initArrows(prevNavigationLink, nextNavigationLink);

        $(".prev-next-key-display").removeClass("hidden");
        $(".prev-next-key-display span").html(acKeyDisplay ? acKeyDisplay : acKey);
    }

    $(document).ready(function () {
        initArrows(prevNavigationLink, nextNavigationLink);
    });

    async function prevNavNeighbour(element) {
        $(element).removeClass("fa-chevron-left").addClass("fa-spinner").addClass("fa-spin");
        $(element).closest(".prev-next-key-display").find("i").css("pointer-events", "none");
        let response = await handleNavigatior(prevNavigationLink, true);
        if (!response) {
            $(element).addClass("fa-chevron-left").removeClass("fa-spinner").removeClass("fa-spin");
            $(element).closest(".prev-next-key-display").find("i").css("pointer-events", "auto");
        }
    }

    async function nextNavNeighbour(element) {
        $(element).removeClass("fa-chevron-right").addClass("fa-spinner").addClass("fa-spin");
        $(element).closest(".prev-next-key-display").find("i").css("pointer-events", "none");
        let response = await handleNavigatior(nextNavigationLink, true);
        if (!response) {
            $(element).addClass("fa-chevron-right").removeClass("fa-spinner").removeClass("fa-spin");
            $(element).closest(".prev-next-key-display").find("i").css("pointer-events", "auto");
        }
    }

    function keyAction(element) {
        if (!keyNavigationLink || keyNavigationLink.length === 0) return;

        $(element).closest(".prev-next-key-display").find("i").css("pointer-events", "none");
        window.location.href = keyNavigationLink;
    }

    function handleNavigatior(url, redirect) {
        return fetch(url)
            .then(response => response.text())
            .then(data => {
                if (!data) return;

                if (redirect) {
                    let windowUrl = window.location;
                    let baseUrl = new URL(windowUrl.protocol + "//" + windowUrl.host + "/" + windowUrl.pathname.split('/')[1]);
                    let redirectUrl = decodeURIComponent(new URL(url, baseUrl).searchParams.get("RedirectUrl")).replace("{id}", data);
                    window.location.href = redirectUrl;
                    return data;
                }
                else {
                    return data;
                }
            }).catch(function () {
                if (redirect) location.reload();
                else return "";
            });
    }

    async function initArrows(prevNavigation, nextNavigation) {
        let hasPrev = await handleNavigatior(prevNavigation) ? true : false;
        let hasNext = await handleNavigatior(nextNavigation) ? true : false;

        if (!hasPrev) $(".prev-next-key-display i").eq(0).addClass("disabled");
        else $(".prev-next-key-display i").eq(0).removeClass("disabled");

        if (!hasNext) $(".prev-next-key-display i").eq(1).addClass("disabled");
        else $(".prev-next-key-display i").eq(1).removeClass("disabled");
    }
</script>