"use strict";

function FuzzySearch(apiCall) {

    let clubInput = null
    let initialized = false

    if (initialized)
        return

    this.isInitialized = function () {
        return initialized
    }

    apiCall.getClubList(function (success, aClubs) {
        if (!success && !aClubs?.length)
            return

        for (let oClub of aClubs) {
            oClub.filteredClub = oClub.club_name.replace(/d+/g, "").replace(/ /g, " ");
        }

        let fuseOptions = { keys: ["club_name", "filteredClub"] };
        let options = {
            display: "club_name",
            key: "zps",
            fuseOptions: fuseOptions,
            "resultsLimit": 10
        };

        clubInput = $('#groupRegistrationForm').find('#club');

        clubInput.fuzzyComplete(aClubs, options);
        updateFuzzyResultsPosition()
        enableInputAndButton();
        createMutationObserver()
        initialized = true
    });

    $('#gruppenanmeldung-tab').click(function () {
        setTimeout(function () {
            updateFuzzyResultsPosition()
        }, 10);
    })

    function updateFuzzyResultsPosition() {
        let inputRect = clubInput.offset();
        let inputWidth = clubInput.outerWidth();
        let inputHeight = clubInput.outerHeight();

        let fuzzyResultsTop = inputRect.top + inputHeight;

        $(".fuzzyResults").css({
            width: inputWidth + "px",
            left: inputRect.left + "px",
            top: fuzzyResultsTop + "px"
        });

        clubInput.click(function () {
            setTimeout(function () {
                updateFuzzyResultsPosition()
            }, 10);
        })
    }

    $(window).resize(function () {
        updateFuzzyResultsPosition();
    });

    function enableInputAndButton() {
        $('#gruppenanmeldung input').prop("disabled", false)
        $('#gruppenanmeldung button').prop("disabled", false)
    }

    function createMutationObserver() {
        var targetNode = document.querySelector('.fuzzyResults');

        var observer = new MutationObserver(function (mutationsList, observer) {
            for (let mutation of mutationsList) {
                if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
                    let dropdown = $(targetNode)
                    let displayStyle = dropdown.css('display');
                    if (displayStyle !== 'none') {
                        let dropdownHeight = $(dropdown).height();
                        scrollToPosition(dropdownHeight)
                    }
                }
            }
        });

        var config = { attributes: true };
        observer.observe(targetNode, config);
    }
}