"use strict";

// elements

/** @type {HTMLButtonElement} */
let loadAlbumsBtn

/** @type {HTMLButtonElement} */
let loadPhotosBtn

/** @type {HTMLSelectElement} */
let albumSelect

/** @type {HTMLParagraphElement} */
let noticeP

/** @type {HTMLDialogElement} */
let noticeDialog

function main() {
    albumSelect = document.getElementById("album_selector")
    loadAlbumsBtn = document.getElementById("load_albums_button")
    loadPhotosBtn = document.getElementById("load_photos_button")
    noticeDialog = document.getElementById("notice_dialog")
    noticeP = document.getElementById("notice_p")
    loadAlbumsBtn.onclick = () => loadAlbums()
    loadPhotosBtn.onclick = () => loadPhotos()
}

function loadAlbums() {
    (async () => {
        try {
            closeNotice()
            const resp = await fetch("get-albums")
            const albums = await resp.json()
            if(albums.length == 0) {
                showNotice("No Albums found")
                return
            }
            albumSelect.replaceChildren() // This empties existing options
            for(const album of albums) {
                albumSelect.add(new Option(album.Title, album.UID))
            }
        } catch(e) {
            console.log(e)
        }
    })();
}

function closeNotice() {
    noticeDialog.close()
}

/**
 * @param {string} notice
 */
function showNotice(notice) {
    noticeP.textContent = notice
    noticeDialog.show()
}

function loadPhotos() {
    closeNotice()
    const selected = albumSelect.selectedOptions
    if(selected.length != 1) {
        showNotice("Select an album to load photos")
        return
    }
    const [elem] = selected
    console.log(elem)
    console.log(elem.text)
    console.log(elem.value)
}


main()