import ext from "./utils/ext";
import storage from "./utils/storage";

var page_data = {
  title: "",
  description: "",
  image: "",
  comment: "",
  url: document.location.href
};

var popup = document.getElementById("app");
storage.get("extract", function(resp) {
  var extract = resp.extract;
  if (extract) {
    document.getElementById("save-content").checked = extract
      ? "checked"
      : false;
  }
});

var renderMessage = message => {
  document.getElementById("display-container").textContent = message;
};

var renderBookmark = data => {
  if (data) {
    page_data = data;
    document.querySelector("[data-template=title]").textContent =
      page_data.title;
    document.querySelector("[data-template=description]").textContent =
      page_data.description;
    if ("" !== img) {
      var img = document.createElement("image");
      img.src = page_data.image;
      document.querySelector("[data-template=image]").appendChild(img);
    }
    document.querySelector("[data-template=url]").textContent = page_data.url;
    document
      .querySelector("[data-template=url]")
      .setAttribute("href", page_data.url);
  } else {
    renderMessage(ext.i18n.getMessage("cantExtractTitle"));
  }
};

ext.tabs.query({ active: true, currentWindow: true }, function(tabs) {
  var activeTab = tabs[0];
  ext.tabs.sendMessage(
    activeTab.id,
    { action: "process-page" },
    renderBookmark
  );
});

popup.addEventListener("click", function(e) {
  if (e.target && e.target.matches("#save-btn")) {
    e.preventDefault();
    page_data.comment = document.getElementById("comment").value;
    page_data.extract = document.getElementById("save-content").checked;
    ext.runtime.sendMessage(
      { action: "perform-save", data: page_data },
      function(response) {
        if (response && response.action === "saved") {
          renderMessage(ext.i18n.getMessage("savedSuccessfully"));
        } else {
          renderMessage(response.error + " (" + response.status + ")");
        }
      }
    );
  }
});

var dataMessages = document.querySelectorAll("[data-message]");
[].forEach.call(dataMessages, function(elt) {
  elt.textContent = ext.i18n.getMessage(elt.dataset.message);
});

var optionsLink = document.querySelector(".js-options");
optionsLink.addEventListener("click", function(e) {
  e.preventDefault();
  ext.tabs.create({ url: ext.extension.getURL("options.html") });
});