var selectedRow = null;
function onFormSubmit(e){
    event.preventDefault();
    var formData = readFormData();
    if(selectedRow === null){
        insertNewRecord(formData);
    }else{
        updateRecord(formData)
    }
    resetForm();
    }
// Read operation using this function
function readFormData(){
    var formData = {};
    formData["Book Title"] = document.getElementById("BookTitle").value;
    formData["Book Author"] = document.getElementById("BookAuthor").value;
    formData["Book Price"] = document.getElementById("BookPrice").value;
    formData["Book Publisher"] = document.getElementById("BookPublisher").value;
    return formData;
}

// Create operation
function insertNewRecord(data){
    var table = document.getElementById("employeeList").getElementsByTagName('tbody')[0];
    var newRow = table.insertRow(table.length);
    var cell1 = newRow.insertCell(0);
        cell1.innerHTML = data.BookTitle;
    var cell2 = newRow.insertCell(1);
        cell2.innerHTML = data.BookAuthor;
    var cell3 = newRow.insertCell(2);
        cell3.innerHTML = data.BookPrice;
    var cell4 = newRow.insertCell(3);
        cell4.innerHTML = data.BookPublisher;
    var cell5 = newRow.insertCell(4);
        cell5.innerHTML = `<a href="#" onClick='onEdit(this)'>Edit</a>
                        <a href="#" onClick='onDelete(this)'>Delete</a>`;
}

// To Reset the data of fill input
function resetForm(){
    document.getElementById('BookTitle').value = '';
    document.getElementById('BookAuthor').value = '';
    document.getElementById('BookPrice').value = '';
    document.getElementById('BookPublisher').value = '';
    selectedRow = null;
}

// For Edit operation
function onEdit(td){
    selectedRow = td.parentElement.parentElement;
    document.getElementById('BookTitle').value = selectedRow.cells[0].innerHTML;
    document.getElementById('BookAuthor').value = selectedRow.cells[1].innerHTML;
    document.getElementById('BookPrice').value = selectedRow.cells[2].innerHTML;
    document.getElementById('BookPublisher').value = selectedRow.cells[3].innerHTML;
}
function updateRecord(formData){
    selectedRow.cells[0].innerHTML = formData.BookTitle;
    selectedRow.cells[1].innerHTML = formData.BookAuthor;
    selectedRow.cells[2].innerHTML = formData.BookPrice;
    selectedRow.cells[3].innerHTML = formData.BookPublisher;
}
function onDelete(td){
    if(confirm('Are you sure you want to delete this record?')){
        row = td.parentElement.parentElement;
        document.getElementById('bookrecorder').deleteRow(row.rowIndex);
        resetForm();
    }    
}

function download_csv(csv, filename) {
    var csvFile;
    var downloadLink;

    // CSV FILE
    csvFile = new Blob([csv], {type: "text/csv"});

    // Download link
    downloadLink = document.createElement("a");

    // File name
    downloadLink.download = filename;

    // We have to create a link to the file
    downloadLink.href = window.URL.createObjectURL(csvFile);

    // Make sure that the link is not displayed
    downloadLink.style.display = "none";

    // Add the link to your DOM
    document.body.appendChild(downloadLink);

    // Lanzamos
    downloadLink.click();
}

function export_table_to_csv(html, filename) {
	var csv = [];
	var rows = document.querySelectorAll("table tr");
	
    for (var i = 0; i < rows.length; i++) {
		var row = [], cols = rows[i].querySelectorAll("td, th");
		
        for (var j = 0; j < cols.length; j++) 
            row.push(cols[j].innerText);
        
		csv.push(row.join(","));		
	}

    // Download CSV
    download_csv(csv.join("\n"), filename);
}

document.querySelector("button").addEventListener("click", function () {
    var html = document.querySelector("table").outerHTML;
	export_table_to_csv(html, "table.csv");
});