import { addClass } from '../../helpers/Dom';
import { DirectiveOptions } from 'vue';

function createLink(el: HTMLElement, binding: any, vnode: any) {
  const valContainer = binding.value.text;

  if (binding.value.text.length > binding.arg) {
    const readMore = document.createElement('a');
    const readLess = document.createElement('a');
    vnode.elm.textContent = binding.value.text.substring(0, binding.arg) + '...';
    readMore.href = '#';
    readMore.text = binding.value.readMore;
    addClass(readMore, 'default-link');
    addClass(readMore, 'sh-read-more-link');
    readLess.href = '#';
    readLess.text = binding.value.readLess;
    addClass(readLess, 'default-link');
    addClass(readLess, 'sh-read-more-link');

    vnode.elm.append(' ', readMore);

    readMore.addEventListener('click', (e: Event) => {
      e.preventDefault();
      vnode.elm.textContent = valContainer;
      vnode.elm.append(' ', readLess);
    });

    readLess.addEventListener('click', (e: Event) => {
      e.preventDefault();
      vnode.elm.textContent = binding.value.text.substring(0, binding.arg) + '...';
      vnode.elm.append(' ', readMore);
    });

  } else {
    vnode.elm.textContent = binding.value.text;
  }
}

const ShReadMore: DirectiveOptions = {
  bind(el: HTMLElement, binding: any, vnode: any) {
    createLink(el, binding, vnode);
  },
  update(el: HTMLElement, binding: any, vnode: any) {
    createLink(el, binding, vnode);
  },
};

export default ShReadMore;