import {
  numericChangeHandler,
  numericKeyDownHandler,
  numericPasteHandler
} from "@/directives/index";

const numbers = "0123456789";
const utility = [
  "ArrowLeft",
  "ArrowRight",
  "Tab",
  "Shift",
  "Delete",
  "Backspace",
  "Enter"
];
const allowedChars = [...numbers.split(""), ...utility];

export const DigitsDirective = {
  beforeMount(el: HTMLElement, binding: any) {
    if (
      Object.prototype.hasOwnProperty.call(binding, "value") &&
      binding.value
    ) {
      el.addEventListener(
        "keydown",
        numericKeyDownHandler.bind({ allowedChars })
      );
      el.addEventListener("paste", numericPasteHandler.bind({ allowedChars }));
      el.addEventListener("input", numericChangeHandler);
    }
  },
  unmounted(el: HTMLElement) {
    el.removeEventListener("keydown", numericKeyDownHandler);
    el.removeEventListener("paste", numericPasteHandler);
    el.removeEventListener("change", numericChangeHandler);
  }
};
