import { createPopper } from '@popperjs/core';
import type { Instance, Options } from '@popperjs/core';
import clickOutside from './outsideClick';
import '../scss/tooltip.scss';

// let popoverShowed = false;
function useState<T>(defaultValue: T): [() => T, (value: T, callback: () => void) => void]{
  let popoverShowed: T = defaultValue;
  function getValue() {return popoverShowed}
  function setValue(value: T, callback: () => void) {
    popoverShowed = value;
    callback();
  }
  return [getValue, setValue];
}

const [popoverShowed, setPopoverShowed] = useState(false);

function show(tooltip: HTMLElement, popperInstance: Instance) {
  tooltip.setAttribute('data-show', '');
  popperInstance.update();
}

function hide(tooltip: HTMLElement, popperInstance: Instance) {
  tooltip.removeAttribute('data-show');
}

const defaultOptions:Options = {
  placement: 'top-start',
  modifiers: [
    {
      name: 'offset',
      options: {
        offset: [0, 8],
      },
    },
  ],
  strategy: 'absolute',
  onFirstUpdate: () => null,
}

export const initPopover = (popoverTrigger: HTMLElement, popoverContent: string, options: Options = defaultOptions) => {
  const tooltip = document.createElement('div');
  tooltip.classList.add('tooltip');
  tooltip.innerHTML = popoverContent;
  const popoverTriggerContainer = document.createElement('span');
  const triggerText = popoverTrigger.textContent;
  popoverTriggerContainer.classList.add('popover-trigger');
  popoverTriggerContainer.textContent = triggerText;
  
  popoverTrigger.textContent = '';
  popoverTrigger.appendChild(popoverTriggerContainer);
  popoverTrigger.appendChild(tooltip);

  const popperInstance = createPopper(popoverTrigger, tooltip, options);
 
  popoverTriggerContainer.addEventListener('mouseover', () => {
    setPopoverShowed(!popoverShowed(), () => {
      if (!popoverShowed()) {
        hide(tooltip, popperInstance);
      } else {
        show(tooltip, popperInstance);
      }
    });
  });
  popoverTriggerContainer.addEventListener('mouseleave', () => {
    setPopoverShowed(false, () => {
      hide(tooltip, popperInstance)
    });
  });
  
  


  return popperInstance;
}