import { DirectiveFunction, DirectiveOptions } from 'vue'

const createDirective = (className: string) => {
  const update: DirectiveFunction = ({ classList }, { value }) => {
    if (value && !classList.contains(className)) {
      classList.add(className)
    } else if (!value && classList.contains(className)) {
      classList.remove(className)
    }
  }

  const directive: DirectiveOptions = {
    update,
    bind: update,
    unbind: ({ classList }) => classList.remove(className),
  }

  return directive
}

export default createDirective