window.addEventListener("load", () => main());

const main = () => {
    // Video folder
    const videoFolder = "./videos";

    // Video list, as a list of ["filename", "extension"]
    const videos = {
        1: ["nameOfFirstVideo", "mp4"],
        2: ["nameOfSecondVideo", "mp4"],
        3: ["nameOfThirdVideo", "mp4"],
        4: ["nameOfFourthVideo", "mp4"],
    };

    /* Add option for each videos
     * For example:
     * {
     *   1: [2],
     *   2: [3, 4]
     * };
     *
     * The video 1 offer the option to redirect to the video 2
     * The video 2 offer the option to redirect to the video 3 and 4 */
    const tree = {
        1: [2],
        2: [3, 4],
    };

    // TODO: Add custom label for the button redirection

    // Main Element who will receive the videos
    const mainElement = document.getElementsByTagName("main").item(0);

    // Current video showed to the user
    let currentVideo;

    // Buttons showed to the user
    let buttons = [];

    // Add property to the player
    currentVideo = document.createElement("video");
    currentVideo.controls = true;
    currentVideo.width = window.innerWidth - window.innerWidth / 4;
    currentVideo.style = "\
        display: block; \
        margin: auto;";

    // Init the page with the first video
    const source = document.createElement("source");

    source.src = `${videoFolder}/${videos[1][0]}.${videos[1][1]}`;
    source.type = `video/${videos[1][1]}`;

    currentVideo.appendChild(source);
    mainElement.appendChild(currentVideo);

    // TODO: Add listener of the buttons

    // TODO: Remove the current video and the buttons

    // TODO: Add function who go to the next video (used by the button's listener)

    /* Help for TODOs:
     *
     * for (let [key, value] of Object.entries(tree)) {
     *     // key is the number (0, 1, 2)
     *     // value is the [filename, extension]
     * }
     */
};