document.addEventListener('DOMContentLoaded', async ()=>{
    const button = document.getElementById('submitZdj')
    const selection = document.getElementById("wybor")
    const img = document.getElementById('img')

    let daneJson = await fetch('php.php?type=all')
    if(!daneJson.ok){
        throw new Error("Błąd połączenia")
    }
    let dane = await daneJson.json()
    console.log(dane)
    dane.forEach(opcja=>{
        const option = document.createElement("option")
        option.value = opcja.id
        option.textContent = opcja.nazwa
        selection.appendChild(option)
    })

    async function getBase64(file) {
        return new Promise((resolve, reject) => {
          const reader = new FileReader();
          reader.readAsDataURL(file);
          reader.onload = () => resolve(reader.result);
          reader.onerror = error => reject(error);
        });
      }

      selection.addEventListener('change', async (event)=>{
        let ansJson = await fetch('php.php?id=' + event.target.value)
        let ans = await ansJson.json()
        img.src = ans[0].zdj
        console.log(ans)
    })

    button.addEventListener('click', async () =>{
        const zdjInput = document.getElementById("zdjecie")

        const zdj = zdjInput.files[0]
        const data = {
            zdj: await getBase64(zdj),
            nazwa: zdj.name
        }
        console.log(data)
    
        let fetchans = await fetch('php.php', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json'
            },
            body: JSON.stringify(data)
        })

        if(!fetchans.ok){
            throw new Error("Bład połączenia")
        }
        let ans = await fetchans.json()
        console.log(ans)
    })

})