import { isElementInViewport, findParentWithClass } from '~/utils/dom'

var tooltipNode;
var $highlightedPost;
var modifiedQuotelinks = [];

const { headerHeight } = Lurka.settings;

const highlightClass = 'highlight';
const animateClass = ' ' + 'animate';
const tooltipClass = 'ThreadPost tip';

// Space between the tooltip and the quote link
const tooltipMargin = 5

// When a person quotes multiple posts, what text should be used to
// distinguish the post you're on from the other posts
// e.g. hover over a quote, a tooltip pops up with multple quotes. Which one is
// replying to the post you're on?
const quoteDistinguisher = " (This)";

// Distance from the right side of the screen. When to render the tooltip on
// the left instead of the right
const rightThreshold = 200;

export const createTooltipCreator = ($thread) => {
    return function (event) {

        const target = event.target,
              href = target.getAttribute('href'),
              $post = $thread.find(href),
              linkPos = target.getBoundingClientRect()  // abs position of link

        highlightQuotedIDIfMultiple($post, target);

        if (isElementInViewport($post[0])) {
            $post.addClass(highlightClass)
            $highlightedPost = $post
            return
        }

        console.groupCollapsed('%c Tooltip', 'color:gold');

        let left, top, el = document.createElement('div')

        el.innerHTML = $post.html()
        el.className = tooltipClass

        document.body.appendChild(el)

        // Set distance from left == to the hovered link
        left = linkPos.left

        // Set top to render above the link
        top = linkPos.top - el.offsetHeight - tooltipMargin

        // Check if would render out of page vertically
        if (top < headerHeight) {
            // top of element overflowed
            console.log("top overflowed")

            // render below
            top = linkPos.bottom + tooltipMargin

            // check if bottom will overflow
            if (top + el.offsetHeight > window.innerHeight) {
                // center element around link
                console.warn("bottom overflowed")

                top = linkPos.top - (el.offsetHeight / 2) - target.offsetHeight / 2
                left = linkPos.right + tooltipMargin

                if (top < headerHeight || top + el.offsetHeight > window.innerHeight) {
                    // element overflows; render at top of window
                    console.warn("Can't center. Placed at top.")
                    top = headerHeight+2 // 2 == header margin
                }
            }
        }

        // Check if right side overflows
        if (left + el.offsetWidth > window.innerWidth - rightThreshold) {
            left -= el.offsetWidth/2 - 26;
        }

        // Overflows on left when screen width is small
        if (left <= 0 || left + el.offsetWidth >= window.innerWidth) {
            left = 0
        }

        console.log(`top: ${top}, left: ${left}, el.offsetHeight: ${el.offsetHeight} linkPos.top: ${linkPos.top}`);
        console.groupEnd()

        el.style.top  = top + 'px'
        el.style.left = left + 'px'

        el.className += animateClass

        tooltipNode = el
    }
}

export const destroyTooltip = () => {
    if (tooltipNode) {
        document.body.removeChild(tooltipNode);
        tooltipNode = null;
    } else if ($highlightedPost) {
        $highlightedPost.removeClass(highlightClass);
        $highlightedPost = null;
    }

    if (modifiedQuotelinks.length) {
        for (let i = 0; i < modifiedQuotelinks.length; i++) {
            modifiedQuotelinks[i].text =
                modifiedQuotelinks[i].text.replace(quoteDistinguisher, "");
        }

        modifiedQuotelinks = []
    }
}


function highlightQuotedIDIfMultiple($post, target) {
    const id = findParentWithClass(target, 'ThreadPost').id.replace('p', '');
    const $quotes = $post.find('blockquote .quotelink');

    if ($quotes.length <= 1) {
        console.info("Tooltip contained single quote");
        return
    }


    $quotes.each( function( ) {
        if (this.text.includes(id)) {
            this.text += quoteDistinguisher;
            modifiedQuotelinks.push(this);
        } else {
            console.info(`${id} not in ${this.text}`)
        }
    });
}


@@ -375,16 +375,15 @@
 hen 
-a pers
+some
 on
+e
  quo
@@ -406,205 +406,83 @@
 ts, 
-what text should be used to%0A// distinguish the post you're on from the other posts%0A// e.g. hover over a quote, a tooltip pops up with multple quotes. Which one is%0A// replying to the post you're on?
+this is appended to the current quote%0A// to distinguish it from the others.
 %0Acon
@@ -564,17 +564,35 @@
 screen. 
-W
+Used to determine w
 hen to r
@@ -596,16 +596,19 @@
 o render
+%0A//
  the too
@@ -614,19 +614,16 @@
 oltip on
-%0A//
  the lef
@@ -966,16 +966,86 @@
 f link%0A%0A
+        console.groupCollapsed('%25cQuotelink Tooltip', 'color:gold');%0A%0A
         
@@ -1248,69 +1248,8 @@
  %7D%0A%0A
-        console.groupCollapsed('%25c Tooltip', 'color:gold');%0A%0A
     
@@ -3889,17 +3889,17 @@
 .length 
-%3C
+=
 = 1) %7B%0A 
@@ -3909,30 +3909,19 @@
     
-console.info(%22
+// 
 Tooltip 
 cont
@@ -3920,33 +3920,50 @@
 tip 
-c
 on
-tained single quote%22);
+ly has 1 quote. No need to highlight it.
 %0A   
@@ -3981,17 +3981,16 @@
 %0A    %7D%0A%0A
-%0A
     $quo
@@ -3998,17 +3998,16 @@
 es.each(
- 
 function
@@ -4007,17 +4007,16 @@
 unction(
- 
 ) %7B%0A    
@@ -4141,79 +4141,8 @@
 s);%0A
-        %7D else %7B%0A            console.info(%60$%7Bid%7D not in $%7Bthis.text%7D%60)%0A
     

Update tooltip documentation