import { ObjectDirective } from 'vue'

// Fonction pour formater le prix
const formatPrice = (value: string): string => {
  const numberValue = Number.parseFloat(value)
  return Number.isNaN(numberValue) ? '' : numberValue.toFixed(2).replace('.', ',')
}

// Interface pour ├®tendre HTMLInputElement avec _handleBlur
interface HTMLInputElementWithHandleBlur extends HTMLInputElement {
  _handleBlur?: () => void
}

const priceDirective: ObjectDirective<HTMLInputElementWithHandleBlur> = {
  mounted(el: HTMLInputElementWithHandleBlur) {
    const handleBlur = () => {
      el.value = formatPrice(el.value)
      el.dispatchEvent(new Event('input')) // Pour mettre à jour le v-model
    }
    el.addEventListener('blur', handleBlur)
    el._handleBlur = handleBlur // Stocker la r├®f├®rence pour la suppression ult├®rieure
  },
  unmounted(el: HTMLInputElementWithHandleBlur) {
    if (el._handleBlur) {
      el.removeEventListener('blur', el._handleBlur)
    }
  },
}

export default priceDirective