/*
 * Touch-Verhalten der Action-Buttons (Fullscreen, Legend, PNG, Sort):
 * Auf Touch kurz aufklappen (Label sichtbar), dann automatisch zuklappen.
 * Beim Zuklappen: Fokus vom Button bzw. innerem <select> nehmen, sonst bleibt die Pill
 * durch :focus-visible / :focus-within optisch offen, bis woanders getippt wird.
 * `bindTouchExpandButtons(wrapper)` gibt ein `unbind()` zum Aufräumen in cleanup zurück.
 */

const TOUCH_CLS = 'ce-diagram-expand-btn--touch-open';
const TOUCH_MS = 2000;
const TOUCH_MS_SORT = 3000;

export function bindTouchExpandButtons(wrapper) {
  const ownerDoc = wrapper.ownerDocument || document;
  let _touchTimer = null;
  let _touchTarget = null;

  function clearTouchOpen() {
    if (_touchTimer != null) { clearTimeout(_touchTimer); _touchTimer = null; }
    if (_touchTarget) {
      _touchTarget.classList.remove(TOUCH_CLS);
      /** Nach Touch bleibt sonst :focus-visible / :focus-within (Button bzw. Sort-<select>) aktiv —
       *  die Pill wäre per CSS weiter aufgeklappt, bis woanders getippt wird. */
      const ae = ownerDoc.activeElement;
      if (ae && _touchTarget.contains(ae) && typeof ae.blur === 'function') {
        try { ae.blur(); } catch (_) { /* ignore */ }
      }
      _touchTarget = null;
    }
  }

  function onExpandBtnTouchEnd(e) {
    const btn = e.currentTarget;
    clearTouchOpen();
    btn.classList.add(TOUCH_CLS);
    _touchTarget = btn;
    const ms = btn.classList.contains('ce-diagram-viewer-sort') ? TOUCH_MS_SORT : TOUCH_MS;
    _touchTimer = setTimeout(clearTouchOpen, ms);
  }

  const expandBtns = wrapper.querySelectorAll('.ce-diagram-expand-btn');
  expandBtns.forEach(function (btn) { btn.addEventListener('touchend', onExpandBtnTouchEnd); });

  return {
    unbind() {
      clearTouchOpen();
      expandBtns.forEach(function (btn) { btn.removeEventListener('touchend', onExpandBtnTouchEnd); });
    },
  };
}
