document.addEventListener('pageshow', async () => {
    var moviesTitle = document.getElementById("moviesTitle");
    var seriesTitle = document.getElementById("seriesTitle");
    var moviesTable = document.getElementById("moviesTable");
    var seriesTable = document.getElementById("seriesTable");

    const getMediaCleanerSeriesInfo = async () => {
        const response = await fetch("/mediacleaner/state/getSeriesInfo");

        if(!response.ok){
            throw new Error(`Response status: ${response.status}`)
        }

        return response.json();
    }

    const getMediaCleanerMovieInfo = async () => {
        const response = await fetch("/mediacleaner/state/getMovieInfo");

        if(!response.ok){
            throw new Error(`Response status: ${response.status}`)
        }

        return response.json();
    }

    const updateMediaCleanerState = async () => {
        const response = await fetch("/mediacleaner/state/updateState");

        if(!response.ok){
            throw new Error(`Response status: ${response.status}`)
        }

        return response.json();
    }

    const getMediaCleanerSeriesTitle = async () => {
        const response = await fetch("/mediacleaner/state/getSeriesTitle");

        if(!response.ok){
            throw new Error(`Response status: ${response.status}`);
        }

        return response.json();
    }

    const getMediaCleanerMoviesTitle = async () => {
        const response = await fetch("/mediacleaner/state/getMoviesTitle");

        if(!response.ok){
            throw new Error(`Response status: ${response.status}`);
        }

        return response.json();
    }

    const populateMoviesTable = () => {
        moviesTable.innerHTML = '';

        for(let i = 0; i < moviesInfo.length; i++){
            var row = moviesTable.insertRow(-1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            cell1.innerHTML = moviesInfo[i].Name;
            cell2.innerHTML = "<button>Delete</button>";
        }
    }

    const populateSeriesTable = () => {
        seriesTable.innerHTML = '';

        for(let i = 0; i < seriesInfo.length; i++){
            var row = seriesTable.insertRow(-1);
            var cell1 = row.insertCell(0);
            var cell2 = row.insertCell(1);
            var cell3 = row.insertCell(2);
            cell1.innerHTML = seriesInfo[i].Name;
            cell2.innerHTML = seriesInfo[i].Seasons.map(season => season.replace("Season ", "")).join(", ");
            cell3.innerHTML = "<button>Delete</button>";
        }
    }

    moviesTitle.innerHTML = await getMediaCleanerMoviesTitle();
    seriesTitle.innerHTML = await getMediaCleanerSeriesTitle();

    await updateMediaCleanerState();
    var moviesInfo = await getMediaCleanerMovieInfo();
    var seriesInfo = await getMediaCleanerSeriesInfo();
    populateMoviesTable();
    populateSeriesTable();
});