import '@testing-library/jest-dom'
import { axe, toHaveNoViolations } from 'jest-axe'
import { afterEach, beforeEach, describe, expect, test, vi } from 'vitest'

import './header-service'
import type { PktHeaderService } from './header-service'

expect.extend(toHaveNoViolations)

beforeEach(() => {
  Object.defineProperty(window, 'matchMedia', {
    writable: true,
    value: vi.fn().mockImplementation((query) => ({
      matches: false,
      media: query,
      onchange: null,
      addListener: vi.fn(),
      removeListener: vi.fn(),
      addEventListener: vi.fn(),
      removeEventListener: vi.fn(),
      dispatchEvent: vi.fn(),
    })),
  })
  global.ResizeObserver = class ResizeObserver {
    observe() {}
    unobserve() {}
    disconnect() {}
  }
  window.scrollTo = vi.fn()
})

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

const mount = async (
  props: Record<string, unknown> = {},
  innerHTML = '',
): Promise<PktHeaderService> => {
  const el = document.createElement('pkt-header-service') as PktHeaderService
  el.setAttribute('service-name', 'Min tjeneste')
  el.position = 'relative'
  Object.assign(el, props)
  if (innerHTML) el.innerHTML = innerHTML
  document.body.appendChild(el)
  await customElements.whenDefined('pkt-header-service')
  await el.updateComplete
  await new Promise((resolve) => setTimeout(resolve, 0))
  await el.updateComplete
  return el
}

// offsetWidth is 0 in jsdom. Zero both breakpoints → desktop; zero only the
// mobile breakpoint (tablet stays positive) → tablet (menu collapses to a button).
const DESKTOP = { mobileBreakpoint: 0, tabletBreakpoint: 0 }
const TABLET = { mobileBreakpoint: 0, tabletBreakpoint: 1280 }

describe('pkt-header-service – tilgjengelighet', () => {
  test('ingen brudd i standardvisning (desktop)', async () => {
    const el = await mount(DESKTOP, '<a href="#en">Lenke én</a><a href="#to">Lenke to</a>')
    expect(await axe(el)).toHaveNoViolations()
  })

  test('ingen brudd med søk og innlogget bruker', async () => {
    const el = await mount({ ...DESKTOP, showSearch: true, user: { name: 'Aksel Web Opdahl' } })
    expect(await axe(el)).toHaveNoViolations()
  })

  test('ingen brudd med åpen brukermeny', async () => {
    const el = await mount({ ...DESKTOP, user: { name: 'Aksel Web Opdahl' }, openedMenu: 'user' })
    expect(await axe(el)).toHaveNoViolations()
  })

  test('ingen brudd i nettbrettvisning med åpen meny', async () => {
    const el = await mount({ ...TABLET, openedMenu: 'slot' }, '<a href="#en">Lenke én</a>')
    expect(await axe(el)).toHaveNoViolations()
  })
})