window.addEventListener('load', solve);

function solve() {
    let totalLikes = 0
    const inputDOMSelectors = {
        genre: document.querySelector('input[name="genre"]'),
        name: document.querySelector('input[name="name"]'),
        author: document.querySelector('input[name="author"]'),
        date: document.querySelector('input[name="date"]')
    };
    const otherDOMSelectors = {
      addBtn: document.getElementById("add-btn"),
      allHitsContainer : document.querySelector(".all-hits-container"),
      savedHitsContainer : document.querySelector(".saved-container"),
      totalLikesContainer: document.querySelector(".likes>p")
    };

    otherDOMSelectors.addBtn.addEventListener("click", addSongHandler)

    function addSongHandler(){
      event.preventDefault()
        let allInputsAreNonEmpty = Object.values(inputDOMSelectors).every((input) => input.value !== "")

        if (!allInputsAreNonEmpty){
            console.log("HAS INVALID")
            return
        }

        let {genre, name, author, date} = inputDOMSelectors

        let songContainer = createElement("div", otherDOMSelectors.allHitsContainer, "", ["hits-info"])
        createElement("img", songContainer, null, null, null, {src: "./static/img/img.png"})
        createElement("h2", songContainer, `Genre: ${genre.value}`)
        createElement("h2", songContainer, `Name: ${name.value}`)
        createElement("h2", songContainer, `Author: ${author.value}`)
        createElement("h3", songContainer, `Date: ${date.value}`)
        const saveBtn = createElement("button", songContainer, "Save song", ["save-btn"])
        const likeBtn = createElement("button", songContainer, "Like song", ["like-btn"])
        const deleteBtn = createElement("button", songContainer, "Delete", ["delete-btn"])


        saveBtn.addEventListener("click", saveHandler)
        likeBtn.addEventListener("click", likeHandler)
        deleteBtn.addEventListener("click", deleteHandler)

        clearAllInputs()

    }

    function clearAllInputs(){
      Object.values(inputDOMSelectors).forEach((input) => input.value = "")
    }

    function likeHandler(event){
      totalLikes += 1
      let likeBtn = event.currentTarget
      likeBtn.disabled = true
      otherDOMSelectors.totalLikesContainer.textContent = `Total Likes: ${totalLikes}`
  }

  function saveHandler(event){
      let songDiv = event.currentTarget.parentElement
      let saveBtn = songDiv.querySelectorAll("button")[0]
      let likeBtn = songDiv.querySelectorAll("button")[1]
      otherDOMSelectors.savedHitsContainer.appendChild(songDiv)
      saveBtn.remove()
      likeBtn.remove()
  }

  function deleteHandler(event){
      let songDiv = event.currentTarget.parentElement
      songDiv.remove()
  }


    function createElement(type, parent, content, classes, id, attributes){
        let element = document.createElement(type)
        if (content && type !== "input"){
          element.textContent = content
        }
        if (content && type === "input"){
          element.value = content
        }
        if (parent){
          parent.appendChild(element)
        }
        if (id){
          element.id = id
        }
        if (classes){
          element.classList.add(...classes)
        }
        if (attributes){
          for (const key in attributes) {
            element.setAttribute(key, attributes[key])
          }
        }
        return element
    }
}