/**
 * Created by geweimin on 17/6/19.
 */

const hiddenToolTips = () => {
  document.getElementById('toolTips').style.visibility = 'hidden';
};

const showToolTips = (ele, content, setting) => {
  const clientRect = ele.getBoundingClientRect();
  let toolTips = document.querySelector('#toolTips');
  let arrow = document.querySelector('#tipsArrow');
  let tipContent = document.querySelector('#tipContent');
  if (!toolTips) {
    toolTips = document.createElement('div');
    toolTips.className = 'toolTips';
    toolTips.id = 'toolTips';
    arrow = document.createElement('span');
    arrow.className = 'tipsArrow';
    arrow.id = 'tipsArrow';
    toolTips.appendChild(arrow);
    tipContent = document.createElement('div');
    tipContent.className = 'tipContent';
    tipContent.id = 'tipContent';
    toolTips.appendChild(tipContent);
  } else {
    toolTips.style.visibility = 'visible';
  }
  toolTips.style.top = clientRect.top + clientRect.height + 5 + 'px';
  toolTips.style.left = clientRect.left + 'px';
  document.getElementsByTagName('body')[0].append(toolTips);
  let tipContentChild = "<table cellSpacing=0 cellPadding=0 class='need-border'>";
  tipContentChild += '<div style=\'white-space: nowrap;\'>' + content + '</div>';
  tipContentChild += '</table>';
  tipContent.innerHTML = tipContentChild;
};

export const addToolTips = (ele, content, event, setting) => {
  if (event === 'hover') {
    ele.addEventListener('mouseover', e => {
      showToolTips(ele, content, setting);
    });

    ele.addEventListener('mouseout', e => {
      hiddenToolTips();
    });
  } else if (event === 'click') {
    ele.addEventListener('click', e => {
      const toolTips = document.getElementById('toolTips');
      if (toolTips && toolTips.style.visibility === 'hidden') {
        showToolTips(ele, content, setting);
      } else {
        hiddenToolTips();
      }
    });
  } else {
    showToolTips(ele, content, setting);
    setTimeout(() => {
      hiddenToolTips();
    }, 2000);
  }
};
