import { CocoComponent } from "@assets/js/coco/component";

export default CocoComponent("modalDialog", () => {
  return {
    frame: null,

    init() {
      this.onFrameLoad = this.onFrameLoad.bind(this);
      this.frame = this.$el.closest("turbo-frame");

      if (this.frame) {
        this.frame.addEventListener("turbo:frame-load", this.onFrameLoad);
      }
    },

    close() {
      this.modal.hide();
    },

    onFrameLoad() {
      this.$focus.focus(this.firstInput);
    },

    destroy() {
      if (this.frame) {
        this.frame.removeEventListener("turbo:frame-load", this.onFrameLoad);
      }
    },

    get firstInput() {
      return this.$root.querySelector(
        "input:not([type=hidden]), textarea, select"
      );
    },
  };
});