window.addEventListener("load", function() {
  new ClipboardJS("#copy-url");

  let uploadImageForm = document.getElementById("upload-image");
  if (uploadImageForm) {
    uploadImageForm.addEventListener("submit", function(e) {
      e.preventDefault();

      let req = new XMLHttpRequest();
      let fd  = new FormData();
      req.addEventListener("load", function() {
        if (req.status == 201) {
          for (img in JSON.parse(req.responseText)) {
            let imageContainerElement   = document.createElement("div");
            imageContainerElement.class = "col-md-6";

            let imageElement   = document.createElement("img");
            imageElement.class = "img-fluid rounded";
            imageElement.src   = "@{ImageR UUID.nil}".slice(0, -40) + img;

            let imageArea = document.getElementById("image-area");
            imageContainerElement.append(imageElement);
            imageArea.insertAdjacentElement("afterend", imageContainerElement);
          }
        }
      });
      req.open("PUT", uploadImageForm.action);
      // req.setRequestHeader("Content-type", "multipart/form-data");
      req.setRequestHeader("Accept", "application/json");

      for (const file of uploadImageForm.elements.image.files) {
        fd.append("images", file);
      }
      req.send(fd);

      return false;
    });
  }

  let removeImageForms = document.getElementsByClassName("remove-image");
  for (let removeImageForm of removeImageForms) {
    removeImageForm.addEventListener("submit", function(e) {
      e.preventDefault();

      let req = new XMLHttpRequest();
      req.addEventListener("load", function() {
        if (req.status == 204) {
          window.location.reload();
        } else {
          removeImageForm.elements.uri.classList.add("is-invalid");
          document.getElementById("import-error").textContent = req.responseText;
        }
      });
      req.open("DELETE", removeImageForm.action);
      req.setRequestHeader("Content-type", "application/json");
      req.setRequestHeader("Accept", "application/json");

      req.send(JSON.stringify(
        removeImageForm.elements.image.value
      ));

      return false;
    });
  }

  let importCalendarForm = document.getElementById("import-calendar");
  if (importCalendarForm) {
    importCalendarForm.addEventListener("submit", function(e) {
      e.preventDefault();

      let req = new XMLHttpRequest();
      req.addEventListener("load", function() {
        if (req.status == 204) {
          window.location.reload();
        } else {
          importCalendarForm.elements.uri.classList.add("is-invalid");
          document.getElementById("import-error").textContent = req.responseText;
        }
      });
      req.open("PUT", importCalendarForm.action);
      req.setRequestHeader("Content-type", "application/json");
      req.setRequestHeader("Accept", "application/json");

      req.send(JSON.stringify([
        importCalendarForm.elements.source.value,
        importCalendarForm.elements.uri.value
      ]));

      return false;
    });
  }

  let newListingForm = document.getElementById("new-listing");
  if (newListingForm) {
    newListingForm.addEventListener("submit", function(e) {
      e.preventDefault();

      let req = new XMLHttpRequest();
      req.addEventListener("load", function() {
        if (req.status == 201) {
          window.location.assign(req.responseText.slice(1,-1));
        }
      });
      req.open("PUT", newListingForm.action);
      req.setRequestHeader("Content-type", "application/json");
      req.setRequestHeader("Accept", "application/json");

      req.send(JSON.stringify({
        "listingNewTitle"       : newListingForm.elements.title.value,
        "listingNewDescription" : newListingForm.elements.description.value,
        "listingNewPrice"       : Number(newListingForm.elements.price.value),
        "listingNewCleaning"    : Number(newListingForm.elements.cleaning.value),
        "listingNewHandlerName" : newListingForm.elements.handlerName.value,
        "listingNewHandlerPhone": newListingForm.elements.handlerPhone.value,
        "listingNewCountry"     : newListingForm.elements.country.value,
        "listingNewAddress"     : newListingForm.elements.address.value
      }));

      return false;
    });
  }

  let editListingForm = document.getElementById("edit-listing");
  if (editListingForm) {
    editListingForm.addEventListener("submit", function(e) {
      e.preventDefault();

      let req = new XMLHttpRequest();
      req.addEventListener("load", function() {
        if (req.status == 200) {
          window.location.replace(req.responseText.slice(1, -1));
        }
      });
      req.open("PUT", editListingForm.action);
      req.setRequestHeader("Content-type", "application/json");
      req.setRequestHeader("Accept", "application/json");

      req.send(JSON.stringify({
        "listingNewTitle"       : editListingForm.elements.title.value,
        "listingNewDescription" : editListingForm.elements.description.value,
        "listingNewPrice"       : Number(editListingForm.elements.price.value),
        "listingNewCleaning"    : Number(editListingForm.elements.cleaning.value),
        "listingNewHandlerName" : editListingForm.elements.handlerName.value,
        "listingNewHandlerPhone": editListingForm.elements.handlerPhone.value,
        "listingNewCountry"     : editListingForm.elements.country.value,
        "listingNewAddress"     : editListingForm.elements.address.value
      }));

      return false;
    });
  }

  let emailInstructionsForm = document.getElementById("email-instructions");
  if (emailInstructionsForm) {
    emailInstructionsForm.addEventListener("submit", function(e) {
      e.preventDefault();

      let req = new XMLHttpRequest();
      req.addEventListener("load", function() {
        if (req.status == 204) {
          window.location.reload();
        }
      });
      req.open("PUT", emailInstructionsForm.action);
      req.setRequestHeader("Content-type", "application/json");
      req.setRequestHeader("Accept", "application/json");

      req.send(JSON.stringify([
        Number(emailInstructionsForm.elements.email.value),
        emailInstructionsForm.elements.instructions.value
      ]));

      return false;
    });
  }
});