import { CocoComponent } from "@assets/js/coco/component";
import tippy from "@js/base/tippy";
import { getData } from "@helpers/alpine";

export default CocoComponent("popover", ({ target, trigger, options = {} }) => {
  return {
    targetEl: null,
    open: false,

    init() {
      this.targetEl = target
        ? document.querySelector(target)
        : this.$el.parentElement;

      if (this.targetEl) {
        this.targetEl.coco_popover = this;

        if (trigger == "click") {
          this.targetEl.style.cursor = "pointer";
        }

        this.$nextTick(() => {
          const content = this.$el.firstElementChild;
          content.__popover_target = this.targetEl;

          tippy(this.targetEl, {
            trigger,
            theme: this.theme,
            maxWidth: "none",
            interactive: true,
            allowHTML: true,
            appendTo: () => document.body,
            content: () => content,
            onShown: () => {
              this.open = true;
            },
            onHidden: () => {
              this.open = false;
            },
            ...options,
          });
        });
      } else {
        console.error(`Popover target '${target} not found.'`);
      }
    },

    show(event) {
      if (
        !event ||
        (this.eventTarget(event) === this.targetEl && this.popoverInstance)
      ) {
        this.popoverInstance.show();
      }
    },

    hide(event) {
      if (
        !event ||
        (this.eventTarget(event) === this.targetEl && this.popoverInstance)
      ) {
        this.popoverInstance.hide();
      }
    },

    toggle(event) {
      if (
        !event ||
        (this.eventTarget(event) === this.targetEl && this.popoverInstance)
      ) {
        this.open ? this.popoverInstance.hide() : this.popoverInstance.show();
      }
    },

    destroy() {
      if (this.popoverInstance) {
        this.popoverInstance.destroy();
      }
    },

    eventTarget(event) {
      if (event.detail.target) {
        if (typeof event.detail.target === "string") {
          return document.querySelector(event.detail.target);
        } else {
          return event.detail.target;
        }
      } else {
        return event.target;
      }
    },

    get theme() {
      return `coco-popover-${this.$root.getAttribute("data-theme")}`;
    },

    get popoverInstance() {
      if (this.targetEl) {
        return this.targetEl._tippy;
      }
    },
  };
});