let navSearch = document.getElementById("nav_search");
let navSearchContainer = document.getElementById("nav_search_container");
let navSearchEl = document.querySelector(".nav_search_el");
navSearchEl.remove();

navSearchContainer.addSubj = function(name, year) {
    let cur = navSearchEl.cloneNode(true);
    cur.querySelector(".search-name").innerText = name;
    cur.querySelector(".search-year > span").innerText = year;
    cur.title = name + " - " + year;
    navSearchContainer.append(cur);
};



navSearch.addEventListener("focus", function () {
    if (!document.querySelector(".nav_search_el")) return;
    navSearchContainer.className += " show";
});
navSearch.hideSearch = function () {
    navSearchContainer.className =
        navSearchContainer.className
            .split(" ")
            .filter(function(s) {
                return s !== "show";
            })
            .join(" ");
};
navSearch.addEventListener("blur", navSearch.hideSearch);
let timer;
navSearch.addEventListener("keyup", function () {
    lastQuery = navSearch.value;
    clearTimeout(timer);
    if (lastQuery.length === 0) {
        navSearch.hideSearch();
        return;
    }

    timer = setTimeout(function () {
        console.log(navSearch.value);
        $.ajax({
            type: 'post',
            url: '/getSubj',
            data: {name: navSearch.value}
        }).done(function (data) {
            navSearchContainer.innerText = '';
            navSearch.hideSearch();
            navSearchContainer.className += " show";
            if (data) {
                data.forEach(function (v) {
                    navSearchContainer.addSubj(v.title, v.releaseYear);
                })
            } else navSearch.hideSearch();
        });
    }, 500)
});

if (searchTitle != null && !searchTitle.equals("")) {
    List<PlaylistDto> result = searchService.searchPlaylists(searchTitle, user.get());
    json = objectMapper.writeValueAsString(result);
    response.setContentType("application/json");
    response.getWriter().write(json);
} else request.getRequestDispatcher("/ftl/playlists.ftl").forward(request, response);