import {controllerFactory} from '@utils/createController'
import {disableBodyScroll, enableBodyScroll} from 'body-scroll-lock'

export default class DialogController extends controllerFactory()({
  targets: {dialog: HTMLDialogElement},
}) {
  close() {
    this.dialogTarget.close()
    // reset any child forms
    // for (const form of this.dialogTarget.querySelectorAll('form') ?? []) {
    //   form.reset()
    // }
    enableBodyScroll(this.dialogTarget)
  }
  disconnect() {
    this.close()
  }
  open() {
    this.dialogTarget.showModal()
    disableBodyScroll(this.dialogTarget, {reserveScrollBarGap: true})
  }
  triggerClick() {
    if (this.dialogTarget.open) this.close()
    else this.open()
  }
  windowClick(e: MouseEvent) {
    if (e.target === this.dialogTarget) {
      this.close()
    }
  }
}