const courseTableBody = document.getElementById('table-body');
const permButton = document.getElementById('permission');
const firstDayButton = document.getElementById('first-day');
const courseInfo = document.getElementById('course-info');






// create element and render cafe
 function renderCourse(doc){
     let tr = document.createElement('tr');
     let numsection = document.createElement('td');
     let name = document.createElement('td');
     let days = document.createElement('td');
     let time = document.createElement('td');
     let instructor = document.createElement('td');
     let infoButton = document.createElement('td');


     tr.setAttribute('course-id', doc.data().courseid);
     numsection.textContent = doc.data().numsection;
     name.textContent = doc.data().name;
     days.textContent = doc.data().days;
     time.textContent = doc.data().time;
     instructor.textContent = doc.data().instructor;

     // button
    //  var btn = document.createElement('input');
    //  btn.type = "button";
    //  btn.value = "Info";

    //  btn.addEventListener('click', displayInfo(doc));

    //  infoButton.appendChild(btn);

     tr.appendChild(numsection);
     tr.appendChild(name);
     tr.appendChild(days);
     tr.appendChild(time);
     tr.appendChild(instructor);
    //  tr.appendChild(infoButton);


     courseTableBody.appendChild(tr);
    //  console.log(`Course {courseid} is added`);

 }


// deleting table rows
function deleteCourseRows() {
    while(courseTableBody.rows.length > 0) {
        courseTableBody.deleteRow(0);
      }

}

function renderPermCourse() {
    db.collection('fall19').where("permission", "==", false).orderBy('numsection').get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
             renderCourse(doc);
        })
    })
    console.log("rendered Perm");
}


function renderFirstDayCourse() {
    db.collection('fall19').where("firstday", "==", false).orderBy('numsection').get().then((snapshot) => {
        snapshot.docs.forEach(doc => {
             renderCourse(doc);
        })
    })
    console.log("rendered First Day");
}



// getting data (default option as the site loads)
db.collection('fall19').orderBy('numsection').get().then((snapshot) => {
    snapshot.docs.forEach(doc => {
         renderCourse(doc);
    })
})

// eventlistener for the permission button
permButton.addEventListener('click', e => {
    e.preventDefault();
    console.log("Permission button clicked");

    deleteCourseRows();
    renderPermCourse();
})


firstDayButton.addEventListener('click', e => {
    e.preventDefault();
    console.log("First Day button clicked");

    deleteCourseRows();
    renderFirstDayCourse();
})



// saving data
// form.addEventListener('submit', (e) => {
//     e.preventDefault();

//     db.collection('cafes').add({
//         name: form.name.value,
//         city: form.city.value
//     });

//     form.name.value = '';
//     form.city.value = '';
// })

// real-time listener

// db.collection('cafes').orderBy('city').onSnapshot(snapshot => {
//     let changes = snapshot.docChanges();
//     changes.forEach(change => {
//         if(change.type == 'added') {
//             renderCafe(change.doc);
//         } else if (change.type == 'removed') {
//             let li = cafeList.querySelector('[data-id=' + change.doc.id + ']');
//             cafeList.removeChild(li)
//         }
//     })
// })


// display course info in a div below

const displayInfo = function(doc) {
    {
        // clearing past selection
        courseInfo.innerHTML = '';

        let courseFullTitle = document.createElement('h3')
        let courseInstructor = document.createElement('h4');
        let courseRoom = document.createElement('span')


        console.log(`Button is clicked`);

        courseFullTitle.textContent = doc.data().numsection + " " + doc.data().name;
        courseInstructor.textContent = doc.data().instructor;
        courseRoom.textContent = doc.data().room;




        courseInfo.appendChild(courseFullTitle);
        courseInfo.appendChild(courseInstructor);
        courseInfo.appendChild(courseRoom);

    }
};