"use strict";

// elements

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

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

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

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

function loadAlbums() {
    (async () => {
        const resp = await fetch("get-albums")
        const albums = await resp.json()
        albumSelect.replaceChildren() // This empties existing options
        for(const album of albums) {
            albumSelect.add(new Option(album.Title, album.UID))
        }
    })();
}

function loadPhotos() {
    const selected = albumSelect.selectedOptions
    if(selected.length != 1) {
        return
    }
    const [elem] = selected
    console.log(elem)
    console.log(elem.text)
    console.log(elem.value)
}


main()