// https://github.com/camsong/fetch-jsonp
// https://raw.githubusercontent.com/camsong/fetch-jsonp/refs/heads/master/src/fetch-jsonp.js

let form = document.querySelector("form");

form.addEventListener("submit", event => {
    // console.log("GO NO FURTHER FORM... I'll take it from here");
    event.preventDefault();
    let formdata = new FormData(form);
    let usp = new URLSearchParams(formdata);
    console.log("urlsearchparams", usp.toString());
    let results_div = document.querySelector("#results");
    fetchJsonp("https://archive.org/advancedsearch.php?"+usp.toString())
        .then(resp => resp.json())
        .then(data => {
            console.log("data", data);
            data.response.docs.forEach (doc => {
                console.log(doc);
                let div = document.createElement("div");
                let a = document.createElement("a");
                let item_url = `https://archive.org/details/${doc.identifier}`;
                let item_metadata_url = `https://archive.org/metadata/${doc.identifier}`;
                a.href = item_url;
                a.textContent = doc.title;
                div.appendChild(a);
                results_div.appendChild(div);
                
                fetchJsonp(item_metadata_url)
                    .then (resp => resp.json())
                    .then(item_data => {
                        console.log("*", item_data);
                        let file_url = `https://${item_data.server}${item_data.dir}/`;
                        let mp3_files = item_data.files.filter(f => f.format == "VBR MP3");
                        let first_file_url = file_url + encodeURI(mp3_files[0].name);
                        let audio = document.createElement("audio");
                        div.appendChild(audio);
                        audio.controls = true;
                        audio.src = first_file_url;
                        
                    })
            
            })
            // here we have access to the response data...
        })

    // fetch("https://archive.org/advancedsearch.php", {
    //     method: "cors",
    //     body: formdata
    // }).then(resp => resp.json())
    // .then(data => {
    //     console.log("data", data);
    // })


    
})