import { createApp, DirectiveBinding, h, ObjectDirective } from 'vue'
import DeleteConfirmationModal from '~/pages/widgets/DeleteConfirmationModal.vue'

// Interface pour ├®tendre HTMLElement avec _handleClick
interface HTMLElementWithHandleClick extends HTMLElement {
  _handleClick?: (event: Event) => void
}

const deleteConfirmDirective: ObjectDirective<HTMLElementWithHandleClick> = {
  mounted(el: HTMLElementWithHandleClick, binding: DirectiveBinding) {
    const handleClick = (event: Event) => {
      event.stopPropagation() // Emp├¬cher la propagation de l'├®v├®nement
      event.preventDefault() // Emp├¬cher l'action par d├®faut

      const modalApp = createApp({
        data() {
          return { show: true }
        },
        methods: {
          confirm() {
            this.show = false
            document.body.removeChild(modalContainer)
            binding.value() // Ex├®cuter la fonction de suppression
          },
          cancel() {
            this.show = false
            document.body.removeChild(modalContainer)
          },
        },
        render() {
          return h(DeleteConfirmationModal, {
            show: this.show,
            onConfirm: this.confirm,
            onCancel: this.cancel,
          })
        },
      })

      const modalContainer = document.createElement('div')
      document.body.appendChild(modalContainer)
      modalApp.mount(modalContainer)
    }

    el.addEventListener('click', handleClick)
    el._handleClick = handleClick // Stocker la r├®f├®rence pour la suppression ult├®rieure
  },
  unmounted(el: HTMLElementWithHandleClick) {
    if (el._handleClick) {
      el.removeEventListener('click', el._handleClick)
    }
  },
}

export default deleteConfirmDirective