const baseURL = 'https://baas.kinvey.com/appdata/';
const appKey = 'kid_rJhI6qsbr';
const userName = 'guest';
const password = 'guest';
const endpoint = 'books';
const headers = {
    'Authorization':`Basic ${btoa(userName + ':' + password)}`,
    'Content-Type':'application/json'
};
let tBody = document.querySelector('tbody');
let title = document.getElementById('title');
let author = document.getElementById('author');
let isbn = document.getElementById('isbn');

document.querySelector('button').addEventListener('click',handleLoadBooks);
let submitButton = document.getElementById('submitBtn');
submitButton.addEventListener('click',handleAddBook);
let form = document.querySelector('form').querySelector('h3');



async function handleLoadBooks() {
    tBody.innerHTML = '';
    let bookObject = await fetch(baseURL + appKey + '/' + endpoint,{
    method:'GET',
    headers:headers
}).then((data) => data.json())
        .then(data => data);

    for(let book of Object.values(bookObject)){
            createBook(book.title,book.author,book.isbn,book._id);
    }
}

function createBook(title,author,isbn,id) {
    let newTrElement = document.createElement('tr');
    let tdBook = document.createElement('td');
    tdBook.textContent = title;
    tdBook.id = id;
    let tdAuthor = document.createElement('td');
    tdAuthor.textContent = author;
    let tdIsbn = document.createElement('td');
    tdIsbn.textContent = isbn;
    let tdButtons = document.createElement('td');
    let edit = document.createElement('button');
    edit.textContent = 'Edit';
    edit.id = 'editBtn';
    edit.addEventListener('click',handleEdit);
    let deleteBtn = document.createElement('button');
    deleteBtn.textContent = 'Delete';
    deleteBtn.addEventListener('click',handleDelete);
    tdButtons.appendChild(edit);
    tdButtons.appendChild(deleteBtn);

    newTrElement.appendChild(tdBook);
    newTrElement.appendChild(tdAuthor);
    newTrElement.appendChild(tdIsbn);
    newTrElement.appendChild(tdButtons);

    tBody.appendChild(newTrElement);

}

async function handleAddBook(e) {
    e.preventDefault();

    let bookObject = {"title":`${title.value}`, "author":`${author.value}`, "isbn":`${isbn.value}`};

    try{
        await fetch(baseURL + appKey + '/' + endpoint,{
            method:'POST',
            headers:headers,
            body:JSON.stringify(bookObject)
        })
            .then(response => response.json())
            .then(print => {
                createBook(title.value,author.value,isbn.value,print._id);
            });
    }catch (e) {
        console.log(e.message)
    }

    title.value = '';
    author.value = '';
    isbn.value = '';
}

async function handleEdit(e){
    e.preventDefault();
    if(this.textContent === 'Edit'){
        submitButton.style.display = 'none';
        this.textContent = 'Click to save changes';
        form.textContent = 'EDIT FORM';
    }else{
        let currentTitle = this.parentNode.parentNode.querySelector('td');
        let currentAuthor = this.parentNode.parentNode.querySelectorAll('td')[1];
        let currentIsbn = this.parentNode.parentNode.querySelectorAll('td')[2];
        console.log(currentIsbn);
        let book = {"title":`${currentTitle.textContent}`, "author":`${currentAuthor.textContent}`, "isbn":`${currentIsbn.textContent}`};
        if(title.value){
            book["title"] = title.value;
        }
        if(author.value){
            book["author"] = author.value;
        }
        if(isbn.value){
            book["isbn"] = isbn.value;
        }

        try{
            await fetch(baseURL + `${appKey}/` + `${endpoint}/` + `${this.parentNode.parentNode.querySelector('td').id}`,{
                method:'PUT',
                headers:headers,
                body:JSON.stringify(book)
            })
                .then(book => book.json());

            currentTitle.textContent = book["title"];
            currentAuthor.textContent = book["author"];
            currentIsbn.textContent = book["isbn"];
            submitButton.style.display = 'block';
            this.textContent = 'Edit';
            form.textContent = 'CREATION FORM';
        }catch (e) {
            console.log(e.message)
        }
    }

    title.value = '';
    author.value = '';
    isbn.value = '';
}


async function handleDelete() {
    let idToEdit = this.parentNode.parentNode.querySelector('td').id;
    try{
        await fetch(baseURL + `${appKey}/` + `${endpoint}/` + idToEdit,{
            method:'DELETE',
            headers:headers
        })
            .then(book => book.json());
        let element = this.parentNode.parentNode;
        element.parentNode.removeChild(element);
    }catch (e) {
        console.log(e.message)
    }
}