import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
import { enableAutoUnmount, flushPromises, mount } from '@vue/test-utils'
import ShortcutHelpDialog from '../../src/components/shell/ShortcutHelpDialog.vue'
import { closeShortcutHelp, openShortcutHelp, shortcutHelp } from '../../src/app/hotkeys'
import { setBundle } from '../../src/app/i18n'
import lang from '../fixtures/lang.json'

beforeEach(() => {
  setBundle(lang.data, 'pl')
  vi.spyOn(navigator, 'platform', 'get').mockReturnValue('Linux x86_64')
})

afterEach(() => {
  closeShortcutHelp()
  document.body.innerHTML = ''
})

// Registered after the cleanup above, so it runs first (hooks run as a stack).
enableAutoUnmount(afterEach)

function marker(hotkey: string): void {
  const element = document.createElement('button')
  element.setAttribute('data-hotkey', hotkey)
  document.body.appendChild(element)
}

function help(): HTMLElement | null {
  return document.body.querySelector('[data-shortcut-help]')
}

describe('ShortcutHelpDialog', () => {
  it('stays closed until the help is opened', async () => {
    mount(ShortcutHelpDialog, { attachTo: document.body })
    await flushPromises()
    expect(help()).toBeNull()
  })

  it('lists the shortcuts the page answers with their keys and labels', async () => {
    mount(ShortcutHelpDialog, { attachTo: document.body })
    marker('mod+s')
    marker('mod+shift+s')
    marker('escape')
    openShortcutHelp()
    await flushPromises()

    const dialog = help()!
    expect(dialog.getAttribute('aria-modal')).toBe('true')
    expect(dialog.textContent).toContain('Skróty klawiaturowe')
    expect(dialog.textContent).toContain('Skróty dostępne na tym ekranie.')
    const rows = [...dialog.querySelectorAll<HTMLElement>('[data-shortcut]')]
    expect(rows.map((row) => row.dataset.shortcut)).toEqual(['mod+s', 'mod+shift+s', 'escape', '?'])
    const keys = (row: HTMLElement) => [...row.querySelectorAll('kbd')].map((kbd) => kbd.textContent)
    expect(keys(rows[0]!)).toEqual(['Ctrl', 'S'])
    expect(keys(rows[1]!)).toEqual(['Ctrl', 'Shift', 'S'])
    expect(keys(rows[2]!)).toEqual(['Esc'])
    expect(rows[0]!.querySelector('dd')!.textContent).toBe('Zapisz')
    expect(rows[1]!.querySelector('dd')!.textContent).toBe('Utwórz i nowy')
    expect(rows[2]!.querySelector('dd')!.textContent).toBe('Anuluj i wróć')
    expect(rows[3]!.querySelector('dd')!.textContent).toBe('Pokaż skróty klawiaturowe')
  })

  it('closes through the close button', async () => {
    mount(ShortcutHelpDialog, { attachTo: document.body })
    openShortcutHelp()
    await flushPromises()

    const close = help()!.querySelector<HTMLButtonElement>('[data-action="close"]')!
    expect(close.getAttribute('aria-label')).toBe('Zamknij')
    close.click()
    await flushPromises()
    expect(shortcutHelp.value).toBeNull()
    expect(help()).toBeNull()
  })
})