function attachEvents() {
    let phoneUl = document.getElementById("phonebook");
    let loadBtn = document.getElementById("btnLoad");
    let nameInput = document.getElementById("person");
    let numberInput = document.getElementById("phone");
    let createBtn = document.getElementById("btnCreate");

    loadBtn.addEventListener("click", loadRecords);
    createBtn.addEventListener("click", submitRecord);

    function loadRecords() {

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

        let requestOptions = {
            method: 'GET',
            headers: myHeaders,
            redirect: 'follow'
        };

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


    function renderRecords(result) {
        phoneUl.innerHTML = "";
        let recordsArr = Object.entries(result);
        //if response is empty obj
        if (recordsArr.length==0){
            phoneUl.textContent="No records available!"
        } else {
        recordsArr.forEach(r => {
           createSingleRecord(r[0],r[1].person, r[1].phone)
        });

    }
    }

    function createSingleRecord(rId,rName, rPhone){
        let recordLi = document.createElement("li");
            recordLi.id = rId;
            recordLi.textContent = `${rName}: ${rPhone}`;
            let delBtn = document.createElement("button");
            delBtn.textContent = "Delete";
            delBtn.addEventListener("click", () => (deleteRecord(recordLi)));
            recordLi.appendChild(delBtn);
            phoneUl.appendChild(recordLi);
    }

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

       let requestOptions = {
            method: 'DELETE',
            headers: myHeaders,
            redirect: 'follow'
        };

        fetch(`http://localhost:3030/jsonstore/phonebook/${recordLi.id}`, requestOptions)
            .then(response => response.text())
            //remove li after record is deleted, no need to make new request
            .then(result => recordLi.remove())
            .catch(error => phoneUl.textContent = "No records available!");
    }

    function submitRecord() {
        let name = nameInput.value;
        let phone = numberInput.value;

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

       let raw = JSON.stringify({ "person": name, "phone": phone });

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

        fetch("http://localhost:3030/jsonstore/phonebook", requestOptions)
            .then(response => response.json())
            //refresh right away
            .then(result => loadRecords())
            .catch(error => console.log('error', error));

            nameInput.value="";
            numberInput.value="";
    }
}

attachEvents();