<script src="../../../resources/js-test-pre.js"></script>
<script src="../resources/media-controls-loader.js" type="text/javascript"></script>
<body>
<script type="text/javascript">

description("Populating a <code>TracksPanel</code> instance.");

const tracksPanel = new TracksPanel;

const numberOfSections = 2;
const numberOfTracksInSection = [3, 5];
const selectedTracks = [[0, 1], [1, 3]];

tracksPanel.dataSource = {
    tracksPanelNumberOfSections: function()
    {
        return numberOfSections;
    },

    tracksPanelTitleForSection: function(sectionIndex)
    {
        return `Title #${sectionIndex}`;
    },

    tracksPanelNumberOfTracksInSection: function(sectionIndex)
    {
        return numberOfTracksInSection[sectionIndex];
    },

    tracksPanelTitleForTrackInSection: function(trackIndex, sectionIndex)
    {
        return `Track ${sectionIndex}x${trackIndex}`;
    },

    tracksPanelIsTrackInSectionSelected: function(trackIndex, sectionIndex)
    {
        return selectedTracks.some(selectedTrack => selectedTrack[0] === sectionIndex && selectedTrack[1] === trackIndex);
    }
};

const container = new LayoutNode;
tracksPanel.presentInParent(container);

const scrollContainer = tracksPanel.children[1];

shouldBeTrue("tracksPanel.presented");
shouldBe("tracksPanel.parent", "container");
shouldBe("scrollContainer.children.length", "numberOfSections");

let sectionIndex, trackIndex;
for (sectionIndex = 0; sectionIndex < numberOfSections; ++sectionIndex) {
    debug("");
    debug(`Hierarchy for section #${sectionIndex}`);
    shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].element.localName`, "section");
    shouldBe(`scrollContainer.children[${sectionIndex}].children.length`, "2");
    shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[0].element.localName`, "h3");
    shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[0].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForSection(sectionIndex));
    shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].element.localName`, "ul");
    shouldBe(`scrollContainer.children[${sectionIndex}].children[1].children.length`, `${numberOfTracksInSection[sectionIndex]}`);
    for (trackIndex = 0; trackIndex < numberOfTracksInSection[sectionIndex]; ++trackIndex) {
        shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].children[trackIndex].element.localName`, "li");
        shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].children[trackIndex].element.className`, selectedTracks.some(selectedTrack => selectedTrack[0] === sectionIndex && selectedTrack[1] === trackIndex) ? "selected" : "");
        shouldBeEqualToString(`scrollContainer.children[${sectionIndex}].children[1].children[trackIndex].element.textContent`, tracksPanel.dataSource.tracksPanelTitleForTrackInSection(trackIndex, sectionIndex));
    }
}

debug("");

</script>
<script src="../../../resources/js-test-post.js"></script>
</body>