// chrome/chrome.js: optional behaviour for estilo-bar and the one top-level
// menu group. Load it with <script defer>. Everything already works
// without it; this only adds what <details> and the platform cannot do for
// themselves:
//
//   - Escape closes the open member of the group (name="estilo-menus": the
//     bar's Menu, switcher and account, and every menubar menu) and returns
//     focus to its title;
//   - a click outside the open member closes it;
//   - Escape in the editable title restores the saved value and leaves
//     the field;
//   - a row or button that opens a dialog (command="show-modal") closes
//     the menu it sat in, returns focus to that menu's title when the
//     dialog closes, and opens the dialog itself on an engine without
//     invoker commands.
//
// The group is one group in every app, so closing it is estilo's job, not
// each app's: Sheets' menubar lost Escape and outside-click entirely when
// it left rastrillo's dropdown.
//
// Both listen in the capture phase. A document app has to stop key
// events from propagating out of its menus — Sheets' grid library acts on
// every key it hears on document, so an arrow in an open menu would walk
// the cell cursor too — and a bubble-phase listener on document never
// hears the Escape such an app stops. Capture hears it first. An app that
// closes its own menu on Escape (Docs' menubar) finds nothing open and
// does nothing, so nothing is handled twice.
;(() => {
  const group = 'details[name="estilo-menus"][open]'
  const openPanel = () => document.querySelector(group)

  // Focus returns to a menu's title; in a menubar with a roving tab stop
  // (one title tabbable, the rest tabindex=-1) the stop moves with it, so
  // Tab then Shift+Tab comes back to the menu you were in, not to File
  // (Astra, estilo #11). A menubar without one is left without one.
  const returnTo = (title) => {
    title.focus()
    const bar = title.closest('[estilo-menubar]')
    if (!bar) return
    const titles = bar.querySelectorAll('[estilo-menubar-title]')
    if (!Array.prototype.some.call(titles, (t) => t.hasAttribute('tabindex'))) return
    Array.prototype.forEach.call(titles, (t) => { t.tabIndex = t === title ? 0 : -1 })
  }

  document.addEventListener('keydown', (e) => {
    if (e.key !== 'Escape' || e.defaultPrevented) return
    const input = e.target.closest && e.target.closest('[estilo-bar-title-input]')
    if (input) {
      input.value = input.defaultValue
      input.blur()
      e.preventDefault()
      return
    }
    const open = openPanel()
    if (!open) return
    open.open = false
    const summary = open.querySelector('summary')
    if (summary) returnTo(summary)
    e.preventDefault()
  }, true)

  document.addEventListener('click', (e) => {
    const open = openPanel()
    if (open && !open.contains(e.target)) open.open = false
  }, true)

  const invokers = typeof HTMLButtonElement !== 'undefined' && 'command' in HTMLButtonElement.prototype
  document.addEventListener('click', (e) => {
    const button = e.target.closest && e.target.closest('button[commandfor][command="show-modal"]')
    if (!button || button.disabled) return
    const dialog = document.getElementById(button.getAttribute('commandfor'))
    const holder = button.closest('details[name="estilo-menus"]')
    if (holder) {
      holder.open = false
      const summary = holder.querySelector('summary')
      if (dialog && summary) dialog.addEventListener('close', () => returnTo(summary), { once: true })
    }
    if (invokers || !dialog || typeof dialog.showModal !== 'function' || dialog.open) return
    dialog.showModal()
    e.preventDefault()
  })
})()