define(["listView"], function (listView) {
    "use strict";

    function getFetchPlaylistItemsFn(itemId) {
        return function () {
            var query = {
                Fields: "PrimaryImageAspectRatio,UserData",
                EnableImageTypes: "Primary,Backdrop,Banner,Thumb",
                UserId: ApiClient.getCurrentUserId()
            };
            return ApiClient.getJSON(ApiClient.getUrl("Playlists/" + itemId + "/Items", query));
        };
    }

    function getItemsHtmlFn(itemId) {
        return function (items) {
            return listView.getListViewHtml({
                items: items,
                showIndex: false,
                showRemoveFromPlaylist: true,
                playFromHere: true,
                action: "playallfromhere",
                smallIcon: true,
                dragHandle: true,
                playlistId: itemId
            });
        };
    }

    function init(page, item) {
        var elem = page.querySelector("#childrenContent .itemsContainer");
        elem.classList.add("vertical-list");
        elem.classList.remove("vertical-wrap");
        elem.enableDragReordering(true);
        elem.fetchData = getFetchPlaylistItemsFn(item.Id);
        elem.getItemsHtml = getItemsHtmlFn(item.Id);
    }

    window.PlaylistViewer = {
        render: function (page, item) {
            if (!page.playlistInit) {
                page.playlistInit = true;
                init(page, item);
            }

            page.querySelector("#childrenContent").classList.add("verticalSection-extrabottompadding");
            page.querySelector("#childrenContent .itemsContainer").refreshItems();
        }
    };
});