import Vue from "vue";
import { isFunction, isEmpty } from "utils/validate";
import LemonPopover from "../components/popover.vue";
let popover;

const hidePopover = () => {
  if (popover) popover.style.display = "none";
};
const showPopover = () => {
  if (popover) popover.style.display = "block";
};
document.addEventListener("click", e => {
  hidePopover();
});
export default {
  hide: hidePopover,
  bind(el, binding, vnode) {
    el.addEventListener("contextmenu", e => {
      if (isEmpty(binding.value) || !Array.isArray(binding.value)) return;
      e.preventDefault();
      LemonPopover.methods.closeAll();
      let component;
      let visibleItems = [];
      if (binding.modifiers.message) component = vnode.context;
      else if (binding.modifiers.contact) component = vnode.child;
      if (!popover) {
        popover = document.createElement("div");
        popover.className = "lemon-contextmenu";
        document.body.appendChild(popover);
      }
      popover.innerHTML = binding.value
        .map(item => {
          let visible;
          if (isFunction(item.visible)) {
            visible = item.visible(component);
          } else {
            visible = item.visible === undefined ? true : item.visible;
          }

          if (visible) {
            visibleItems.push(item);
            const icon = item.icon
              ? `<i class="lemon-contextmenu__icon ${item.icon}"></i>`
              : "";
            return `<div style="color:${item.color}" title="${item.text}" class="lemon-contextmenu__item">${icon}<span>${item.text}</span></div>`;
          }
          return "";
        })
        .join("");
      popover.style.top = `${e.pageY}px`;
      popover.style.left = `${e.pageX}px`;

      popover.childNodes.forEach((node, index) => {
        const { click, render } = visibleItems[index];
        node.addEventListener("click", e => {
          e.stopPropagation();
          if (isFunction(click)) click(e, component, hidePopover);
        });

        if (isFunction(render)) {
          const ins = Vue.extend({
            render: h => {
              return render(h, component, hidePopover);
            }
          });
          const renderComponent = new ins().$mount();
          node.querySelector("span").innerHTML = renderComponent.$el.outerHTML;
        }
      });

      showPopover();
    });
  },
  inserted(el, binding, vnode) {}
};