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('color', function(resp) {
  var color = resp.color;
  if(color) {
    popup.style.backgroundColor = color
  }
});

var renderMessage = (message) => {
  var displayContainer = document.getElementById("display-container");
  displayContainer.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];
  chrome.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;
      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')});
});