import { Controller } from '@hotwired/stimulus'

// The search overlay is a [popover] that must sit exactly over the header. The
// header has no fixed height below `lg`, so on open we copy its current height
// onto --search-overlay-h and move focus into the field. Escape / click-away
// close come from the Popover API; the fade is CSS (#search-overlay).
export default class extends Controller {
    static targets = ['input']

    connect() {
        this.element.addEventListener('toggle', this.#onToggle)
    }

    disconnect() {
        this.element.removeEventListener('toggle', this.#onToggle)
    }

    #onToggle = (event) => {
        if (event.newState !== 'open') return

        const header = this.element.closest('header')
        if (header) {
            this.element.style.setProperty('--search-overlay-h', `${header.offsetHeight}px`)
        }

        requestAnimationFrame(() => this.inputTarget.focus())
    }
}