const application = Stimulus.Application.start();

class TooltipController extends Stimulus.Controller {
  // The tooltip controller assumes that the tooltip element isn't
  // contained by any element or parent element that has "position: relative"
  // If that is the case the positioning of the tooltip WILL break.

  // create an element <div data-target="tooltip.tooltip"></div>
  // this element will be filled with text.

  // for any element that should have a tooltip do the following
  // <span
  //  data-tooltip-msg="My tooltip message"
  //  data-action="mouseover->tooltip#show mouseout->tooltip#hide"
  //  data-tooltip-above="30"
  // ></span>

  // data-tooltip-msg -> The message that the tooltip should display
  // data-tooltip-width -> Width of tooltip
  // data-tooltip-above -> How many pixels above the parent element the tooltip should be
  //                       by default this is 30px.
  static targets = [ "tooltip" ]
  
  show(event) {
    const dataset = event.target.dataset
    let above = Number(event.target.dataset.tooltipAbove ? event.target.dataset.tooltipAbove : 30)
    let tooltip = this.tooltipTarget
    tooltip.innerHTML = event.target.dataset.tooltipMsg
    // re-paint before getting coordinates from tooltip
    let width = dataset.tooltipWidth ? `width: ${dataset.tooltipWidth}px` : ''
    tooltip.style = `display: block; ${width};`
    
    const ttLoc = tooltip.getBoundingClientRect()
    // getBoundingClientRect is viewport coordinates we need
    // height if we've scrolled. 
    const scroll = document.documentElement.scrollTop
    
    let targetPos = event.target.getBoundingClientRect()
    let yLoc = targetPos.y + scroll - above
    let xLoc = targetPos.x + targetPos.width / 2 - ttLoc.width / 2
    xLoc = xLoc < 0 ? 0 : xLoc
    
    tooltip.style = `position: absolute; top: ${yLoc}px; left: ${xLoc}px;`
  }
  
  hide(event) {
    let tooltip = this.tooltipTarget
    tooltip.style = 'display: none;'
  }
  
}

application.register("tooltip", TooltipController);