import { html, render } from 'https://unpkg.com/lit-html?module';
function addItem() {
    let menu = document.getElementById("menu");

    function optionTemplate(o) {
        return html`<option value=${o._id}>${o.text}</option>`
    }

    function renderOptions(arr) {
        let options = arr.map(o => optionTemplate(o));
        render(options, menu)
    }

    //    load existing

    function loadExisting() {
        let requestOptions = {
            method: 'GET',
            redirect: 'follow'
        };

        fetch("http://localhost:3030/jsonstore/advanced/dropdown", requestOptions)
            .then(response => response.json())
            .then(result => renderOptions(Object.values(result)))
            .catch(error => console.log('error', error));
    }

    loadExisting();


    let form = document.querySelector("form");
    form.addEventListener("submit", function (e) {
        e.preventDefault();
        let itemName = document.getElementById("itemText").value;
        submitItem(itemName);
    })

    function submitItem(itemName) {
        let body = { text: itemName }

        let myHeaders = new Headers();
        myHeaders.append("Content-Type", "application/json");

        let raw = JSON.stringify(body);

        let requestOptions = {
            method: 'POST',
            headers: myHeaders,
            body: raw,
            redirect: 'follow'
        };

        fetch("http://localhost:3030/jsonstore/advanced/dropdown", requestOptions)
            .then(response => response.json())
            .then(result => loadExisting())
            .catch(error => console.log('error', error));

        document.getElementById("itemText").value = "";
    }
}

addItem();