const styles = require("./styles.css");

const Vue = require("vue").default;
const App = require("./App.vue").default;

const store = require("./store/index.js").default;
const Storage = require("./api/storage.js").default;

/**
 * @description: one of the lifecycle methods for a panel plugin(is required), called when your plugin is made visible to the user
 * @param {*} event: includes a node property that you can attach your user interface to
 * @return {*}
 */
function show(event) {
  document.body.innerHTML = `<div id="app"></div>`;
  Vue.prototype.$store = store;
  Vue.prototype.$storage = new Storage();
  new Vue({
    render: h => h(App)
  }).$mount('#app')
  let html = document.getElementsByTagName("html")[0];
  html.style.backgroundColor = "#ffffff";
  // let body = document.getElementsByTagName("body")[0];
  // body.classList.remove("uxp-plugin");
}
/**
 * @description: an optional function 
 *               called whenever the user changes the selection in the XD document or mutates a node within that selection
 *               provides two arguments, selection and documentRoot
 * @param {*} selection
 * @param {*} documentRoot
 * @return {*}
 */
function update(selection, documentRoot) {
  store.setAllArtboardsAction(documentRoot.children);
  const { Artboard } = require("scenegraph");
  if (!selection || !(selection.items[0] instanceof Artboard)) {
    store.clearArtboardsAction();
  } else {
    store.setArtboardsAction(selection.items);
  }
}
module.exports = {
  panels: {
    Upload: {
      show,
      update
    }
  }
};