(function () {
  'use strict';

  var ROOT_SEL = '.wpps-cs-accordion-tooltip, .wpps-rm-accordion-tooltip, .wpps-lpc-accordion-tooltip, .wpps-opb-accordion-tooltip, .wpps-cf-accordion-tooltip, .wpps-ai-alt-accordion-tooltip';
  var ARROW_GAP = 8;

  function panelFor(root) {
    return root.querySelector('[class*="accordion-tooltip-panel"]');
  }

  function triggerFor(root) {
    return root.querySelector('[class*="accordion-tooltip-trigger"]');
  }

  function adminContentMinLeft() {
    var menu = document.getElementById('adminmenuwrap') || document.getElementById('adminmenuback');
    if (!menu) {
      return 16;
    }
    return Math.max(16, menu.getBoundingClientRect().right + 8);
  }

  function measurePanel(panel) {
    var cs = window.getComputedStyle(panel);
    var prev = {
      display: panel.style.display,
      visibility: panel.style.visibility,
      position: panel.style.position,
      top: panel.style.top,
      left: panel.style.left,
      bottom: panel.style.bottom,
      transform: panel.style.transform,
      opacity: panel.style.opacity,
      width: panel.style.width,
      maxWidth: panel.style.maxWidth,
    };

    panel.style.display = 'block';
    panel.style.visibility = 'visible';
    panel.style.position = 'fixed';
    panel.style.top = '0';
    panel.style.left = '-9999px';
    panel.style.bottom = 'auto';
    panel.style.transform = 'none';
    panel.style.opacity = '0';
    panel.style.pointerEvents = 'none';
    if (cs.width && cs.width !== 'auto') {
      panel.style.width = cs.width;
    }
    if (cs.maxWidth && cs.maxWidth !== 'none') {
      panel.style.maxWidth = cs.maxWidth;
    }

    var rect = panel.getBoundingClientRect();
    var height = rect.height || panel.offsetHeight || panel.scrollHeight;
    var width = rect.width || panel.offsetWidth || panel.scrollWidth;

    panel.style.display = prev.display;
    panel.style.visibility = prev.visibility;
    panel.style.position = prev.position;
    panel.style.top = prev.top;
    panel.style.left = prev.left;
    panel.style.bottom = prev.bottom;
    panel.style.transform = prev.transform;
    panel.style.opacity = prev.opacity;
    panel.style.width = prev.width;
    panel.style.maxWidth = prev.maxWidth;
    panel.style.pointerEvents = '';

    return {
      width: Math.max(width, 220),
      height: Math.max(height, 24),
    };
  }

  function placePanel(root) {
    var panel = panelFor(root);
    var trigger = triggerFor(root);
    if (!panel || !trigger) {
      return;
    }

    var pr = measurePanel(panel);
    var tr = trigger.getBoundingClientRect();
    var gap = 12 + ARROW_GAP;
    var margin = 12;
    var minLeft = adminContentMinLeft();
    var maxRight = window.innerWidth - margin;
    var panelHeight = pr.height;
    var panelWidth = pr.width;

    var top = tr.top - panelHeight - gap;
    var below = top < margin;

    if (below) {
      var spaceAbove = tr.top - margin;
      var spaceBelow = window.innerHeight - tr.bottom - margin;
      if (spaceBelow < panelHeight + gap && spaceAbove > spaceBelow) {
        top = Math.max(margin, tr.top - panelHeight - gap);
        below = top < margin;
      } else {
        top = tr.bottom + gap;
        below = true;
      }
    }

    var left = tr.left + tr.width / 2 - panelWidth / 2;
    left = Math.max(minLeft, Math.min(left, maxRight - panelWidth));

    panel.style.position = 'fixed';
    panel.style.top = Math.round(top) + 'px';
    panel.style.left = Math.round(left) + 'px';
    panel.style.bottom = 'auto';
    panel.style.transform = 'none';
    panel.style.width = '';
    panel.style.maxWidth = '';
    panel.classList.add('is-positioned');

    var arrowX = tr.left + tr.width / 2 - left;
    arrowX = Math.max(14, Math.min(arrowX, panelWidth - 14));
    panel.style.setProperty('--wpps-tip-x', Math.round(arrowX) + 'px');
    panel.classList.toggle('wpps-accordion-tooltip-panel--below', below);
  }

  function showPanel(root) {
    placePanel(root);
    root.classList.add('is-active');
    var panel = panelFor(root);
    if (panel) {
      panel.style.visibility = 'visible';
      panel.style.opacity = '1';
    }
  }

  function hidePanel(root) {
    root.classList.remove('is-active');
    var panel = panelFor(root);
    if (!panel) {
      return;
    }
    panel.classList.remove('is-positioned', 'wpps-accordion-tooltip-panel--below');
    panel.style.position = '';
    panel.style.top = '';
    panel.style.left = '';
    panel.style.bottom = '';
    panel.style.transform = '';
    panel.style.visibility = '';
    panel.style.opacity = '';
    panel.style.width = '';
    panel.style.maxWidth = '';
    panel.style.removeProperty('--wpps-tip-x');
  }

  function initRoot(root) {
    if (root.getAttribute('data-wpps-accordion-tooltip-init') === '1') {
      return;
    }
    root.setAttribute('data-wpps-accordion-tooltip-init', '1');

    root.addEventListener('mouseenter', function () {
      showPanel(root);
    });
    root.addEventListener('focusin', function () {
      showPanel(root);
    });
    root.addEventListener('mouseleave', function () {
      hidePanel(root);
    });
    root.addEventListener('focusout', function () {
      hidePanel(root);
    });
    root.addEventListener('click', function (e) {
      // preventDefault: a tooltip inside a <label> must not toggle the input.
      e.preventDefault();
      e.stopPropagation();
    });
  }

  function initAll() {
    document.querySelectorAll(ROOT_SEL).forEach(initRoot);
    document.documentElement.classList.add('wpps-accordion-tooltips-ready');
  }

  function repositionActive() {
    document.querySelectorAll(ROOT_SEL + '.is-active').forEach(placePanel);
  }

  if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', initAll);
  } else {
    initAll();
  }

  window.addEventListener('resize', repositionActive);
  window.addEventListener('scroll', repositionActive, true);

  // Allow builders that insert rows dynamically to bind new tooltips.
  window.wppsAccordionTooltipsInit = initAll;
})();
