declare let $: any;

/**
 * Copies text to clipboard then displays feedback to user.
 * Depends on Jquery.
 *
 * HTML
 *  <div class="mm-copy-wrapper">
 *      <span class="mm-copy-content">Text to be copied</span><i class="fa fa-copy mmui-copy-icon mm-copy-trigger"></i>
 *  </div>
 *
 * Javascript:
 *   $('.mm-copy-wrapper').each(
 *       function (){
 *           let triggerNode = $(this).find('.mm-copy-trigger');
 *           let textNode = $(this).find('.mm-copy-content');
 *           triggerNode.click(() => {
 *               copyText(textNode.text(), true, triggerNode);
 *           });
 *       }
 *   );
 *
 * @param text The text to be copied.
 * @param popover Boolean that indicates whether a popover is used as feedback.
 * @param timeout The time in millisecond =s to display feedback popover.
 * @returns {Function} A handler function.
 */
export function copyText(
  text,
  popover = true,
  triggerSelector = null,
  timeout = 750
) {
  copyToClipboard(text);
  if (popover) {
    $(triggerSelector).popover({
      template:
        '<div class="popover mmui-popover" role="tooltip">' +
        '<div class="arrow"></div>' +
        '<h3 class="popover-header"></h3>' +
        '<div class="popover-body"></div>' +
        '</div>',
      content: 'Copied',
      placement: 'top',
    });
    $(triggerSelector).popover('show');
    setTimeout(() => {
      $(triggerSelector).popover('dispose');
    }, timeout);
  }
}

/**
 * Copies text to the clipboard only.
 * @param text
 */
export function copyToClipboard(text) {
  const buffer = document.createElement('textarea');
  buffer.value = text;
  buffer.setAttribute('readonly', '');
  buffer.style.position = 'absolute';
  buffer.style.left = '-99999px';

  document.body.appendChild(buffer);

  buffer.select();
  document.execCommand('copy');

  document.body.removeChild(buffer);
}