import { CocoComponent } from "@assets/js/base/coco";
import { hideAll } from "@assets/js/base/tippy";
import { navigateTo } from "@helpers/location";

export default CocoComponent("modal", () => {
  return {
    open: false,
    frame: null,
    modal: null,
    options: ["dismissable", "closeOnSubmit"],

    init() {
      this.modal = this;
      this.onFrameSubmitEnd = this.onFrameSubmitEnd.bind(this);

      this.frame = this.$el.closest("turbo-frame");
      this.frame.addEventListener("turbo:submit-end", this.onFrameSubmitEnd);

      this.$nextTick(() => this.show()); // ensure transitions run
    },

    show() {
      this.open = true;
      hideAll();
      setTimeout(() => {
        this.$dispatch("modal:shown");
      }, 400);
    },

    hide() {
      this.open = false;
      setTimeout(() => {
        this.clearFrame();
        this.$dispatch("modal:hidden");
      }, 200);
    },

    dismiss(event) {
      if (this.$options.dismissable) this.hide();
    },

    visit(url) {
      navigateTo(url, { frame: this.frame.id, turbo: true });
    },

    scrollTo(pos) {
      setTimeout(() => {
        this.$root.scrollTop = pos + this.contentOffsetTop;
      }, 10);
    },

    clearFrame() {
      this.frame.removeAttribute("src");
      this.frame.removeAttribute("complete");
      this.frame.innerHTML = "";
    },

    onFrameSubmitEnd(event) {
      if (this.$options.closeOnSubmit && event.detail.success) {
        this.hide();
      }
    },

    destroy() {
      this.frame.removeEventListener("turbo:submit-end", this.onFrameSubmitEnd);
    },

    get contentOffsetTop() {
      return parseInt(
        window.getComputedStyle(this.$refs.container).paddingTop,
        10
      );
    },

    root: {
      "x-options": "options",
      "x-show": "open",
      "@keydown.escape.document": "dismiss",
      "@modal:hide.document": "hide",
    },

    overlay: {
      "x-show": "open",
      "x-transition:enter": "overlay-enter",
      "x-transition:enter-start": "overlay-enter-start",
      "x-transition:enter-end": "overlay-enter-end",
      "x-transition:leave": "overlay-leave",
      "x-transition:leave-start": "overlay-leave-start",
      "x-transition:leave-end": "overlay-leave-end",
    },

    container: {
      "x-show": "open",
      "x-transition:enter": "container-enter",
      "x-transition:enter-start": "container-enter-start",
      "x-transition:enter-end": "container-enter-end",
      "x-transition:leave": "container-leave",
      "x-transition:leave-start": "container-leave-start",
      "x-transition:leave-end": "container-leave-end",
    },
  };
});