//reviewDetails.js
import {getReviewsFromStorage, saveReviewsToStorage} from './localStorage.js';

// Run the init() function when the page has loaded
window.addEventListener('DOMContentLoaded', init);

function init(){
    let main = document.querySelector('main');
    let reviews = getReviewsFromStorage();
    setupDelete();
    setupUpdate();
}

function setupDelete(){
    let deleteBtn = document.getElementById('delete');
    let reviews = getReviewsFromStorage();
    let current = JSON.parse(sessionStorage.getItem('current'));
    deleteBtn.addEventListener('click', function(){
        if(window.confirm("Are you sure you want to delete this entry?")){
            //delete function
            if(current){
                console.log(current);
                for(let i = 0; i < reviews.length; i++){
                    console.log(reviews[i]);
                    if(reviews[i]['mealName'] == current['mealName'] && reviews[i]['restaurant'] == current['restaurant']){
                        console.log("match found");
                        reviews.splice(i,1);
                        saveReviewsToStorage(reviews);
                        sessionStorage.removeItem('current');
                        window.location.assign("./index.html");
                        break;
                    }
                };
            }
        }
    });
}

function setupUpdate(){
    let updateBtn = document.getElementById('update');
    let reviews = getReviewsFromStorage();
    let current = JSON.parse(sessionStorage.getItem('current'));
    let form = document.getElementById('update-food-entry');
    updateBtn.addEventListener('click', function(){
        //update function
        if(current){
            console.log(current);
            form.style.display = 'block';
            let tagContainer = document.getElementById('tag-container-form');
            console.log(document.querySelectorAll('#update-food-entry input'));

            //Set value of each input element to current's values
            document.getElementById('mealImg').defaultValue = current['mealImg'];
            document.getElementById('imgAlt').defaultValue = current['imgAlt'];
            document.getElementById('mealName').defaultValue = current['mealName'];
            document.getElementById('comments').textContent = current['comments'];
            document.getElementById('rating-' + `${current['rating']}`).checked = true;
            document.getElementById('restaurant').defaultValue = current['restaurant'];

            if(current['tags']){
                for (let i = 0; i < current['tags'].length; i++) {
                  let newTag = document.createElement('label');
                  newTag.setAttribute('class','tag');
                  newTag.innerHTML = current['tags'][i] + "   ";
                  newTag.addEventListener('click',()=> {
                    tagContainer.removeChild(newTag);
                  });
                  tagContainer.append(newTag);
                }
            }

            //Take formdata values as newData when submit
            form.addEventListener('submit', function(){
                /*
                *  User submits the form for their review.
                *  We create reviewCard and put in storage
                */
                let formData = new FormData(form);
                let newData = {};
                for (let [key, value] of formData) {
                  console.log(`${key}`);
                  console.log(`${value}`);
                  if (`${key}` !== "tag-form") {
                    newData[`${key}`] = `${value}`;
                  }
                }
                newData['tags'] = [];
            
                let tags = document.querySelectorAll('.tag');
                for(let i = 0; i < tags.length; i ++) {
                  newData['tags'].push(tags[i].innerHTML);
                  tagContainer.removeChild(tags[i]);
                }

                for(let i = 0; i < reviews.length; i++){
                    console.log(reviews[i]);
                    if(reviews[i]['mealName'] == current['mealName'] && reviews[i]['restaurant'] == current['restaurant']){
                        console.log("match found");
                        reviews.splice(i,1,newData);
                        saveReviewsToStorage(reviews);
                        sessionStorage.setItem('current', JSON.stringify(newData));
                        break;
                    }
                };

                form.style.display = 'none';

            });

            let tagAddBtn = document.getElementById('tagAdd');
            tagAddBtn.addEventListener('click', ()=> {
              let tagField = document.getElementById('tag-form');
              if (tagField.value.length > 0) {
                let tagLabel = document.createElement('label');
                tagLabel.innerHTML = tagField.value;
                tagLabel.setAttribute('class','tag');
                tagLabel.addEventListener('click',()=> {
                  tagContainer.removeChild(tagLabel);
                });
                
                tagContainer.append(tagLabel);
                tagField.value = '';
              }
            });
        }
    });
}