// Copyright © 2020 Jakob L. Kreuze <zerodaysfordays@sdf.org>
//
// This file is part of Kona.
//
// Kona is free software; you can redistribute it and/or modify it under
// the terms of the GNU Affero General Public License as published by
// the Free Software Foundation; either version 3 of the License, or (at
// your option) any later version.
//
// Kona is distributed in the hope that it will be useful, but WITHOUT
// ANY WARRANTY; without even the implied warranty of MERCHANTABILITY or
// FITNESS FOR A PARTICULAR PURPOSE. See the GNU Affero General Public
// License for more details.
//
// You should have received a copy of the GNU Affero General Public
// License along with Kona. If not, see <http://www.gnu.org/licenses/>.

let selectedImages = [];

window.addEventListener("load", () => {
  // Enable visual queues that make sense only when edit mode is available.
  document.styleSheets[0].insertRule('.image-container { border: none; }', 0);
  document.styleSheets[0].insertRule('.image-container:hover { border: solid 1px; }', 0);

  // Similarly, add a tag dialog that makes sense only when edit mode is available.
  let form = document.createElement("form");
  form.id = "update-form";
  
  let input = document.createElement("input");
  input.id = "update-prompt";
  input.type = "text";

  let updateButton = document.createElement("button");
  updateButton.id = "update-form-submit";
  updateButton.textContent = "Update Selected";

  form.appendChild(input);
  form.appendChild(updateButton);
  document.getElementById("tag-view").appendChild(form);

  updateButton.addEventListener("click", (e) => {
    let queryString = input.value.replace(" ", ",");

    // Send a post for each ID.
    selectedImages.forEach((id) => {
      let xhr = new XMLHttpRequest();
      
      xhr.open("POST", `/api/posts/${id}`);
      xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');

      // Update the tag counts when the update hits the database.
      xhr.onload = () => {
        let xhr = new XMLHttpRequest();
        xhr.open("GET", "/api/tags");
        xhr.onload = () => {
          let topTags = document.getElementById("top-tags");
          topTags.textContent = "";
          JSON.parse(xhr.response).forEach((pair) => {
            let count = pair[0];
            let tag = pair[1];
            
            let a = document.createElement("a");
            a.href = `/posts?query=${tag}`;
            a.textContent = tag;

            let li = document.createElement("li");
            li.appendChild(a);
            li.innerHTML += " " + count;

            topTags.appendChild(li);
          });
        };
        xhr.send();
      }
      
      xhr.send(encodeURI(`tags=${queryString}`));
    });
        
    e.preventDefault();
  });

  // Add event listeners for enabling "select" mode.
  let selectingImages = false;
  document.body.addEventListener("keydown", (e) => { if (e.keyCode == 17) selectingImages = true;  });
  document.body.addEventListener("keyup",   (e) => { if (e.keyCode == 17) selectingImages = false; });

  // Handle potential selection.
  document.getElementById("main").addEventListener("click", (e) => {
    // Select the containing DIV, if the click event occurred on the IMG child.
    let target = e.target.nodeName === "IMG" ?
        e.target.parentElement.parentElement :
        e.target;

    // Ignore clicks that don't land on any image container.
    if (target.nodeName === "MAIN") {
      return false;
    }

    if (selectingImages) {
      // Obtain the image's ID from the element ID.
      let id = parseInt(/image-([\d]*)/.exec(target.id)[1]);

      // Either deselect, or select the image.
      if (selectedImages.includes(id)) {
        selectedImages = selectedImages.filter((n) => n !== id );
        target.style.border = "none";
      } else {
        selectedImages.push(id);
        target.style.border = "solid 2px red";
      }

      // Don't follow the link if we're holding the "select" hotkey.
      e.preventDefault();
    }
  })
});