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

import './header-global'
import { PktHeaderGlobal } from './header-global'
import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'

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()
  vi.unstubAllGlobals()
})

// jsdom reports offsetWidth as 0 (compact). Zero the breakpoints to force the
// full desktop layout; omit to exercise the compact/mobile layout.
const DESKTOP = { mobileBreakpoint: 0, tabletBreakpoint: 0 }

const mount = async (props: Record<string, unknown> = {}): Promise<PktHeaderGlobal> => {
  const el = document.createElement('pkt-header-global') as PktHeaderGlobal
  el.data = EXAMPLE_HEADER_FOOTER_DATA
  el.position = 'relative'
  Object.assign(el, props)
  document.body.appendChild(el)
  await customElements.whenDefined('pkt-header-global')
  await el.updateComplete
  await new Promise((resolve) => setTimeout(resolve, 0))
  await el.updateComplete
  return el
}

const clickHost = async (el: PktHeaderGlobal, selector: string) => {
  el.querySelector<HTMLElement>(selector)?.click()
  await el.updateComplete
  await new Promise((resolve) => setTimeout(resolve, 0))
  await el.updateComplete
}

describe('pkt-header-global – tilgjengelighet', () => {
  test('ingen brudd i standardvisning (desktop)', async () => {
    const el = await mount(DESKTOP)
    expect(await axe(el)).toHaveNoViolations()
  })

  test('ingen brudd i kompakt visning (mobil)', async () => {
    const el = await mount()
    expect(await axe(el)).toHaveNoViolations()
  })

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

  test('ingen brudd med åpen megameny', async () => {
    const el = await mount(DESKTOP)
    await clickHost(el, '#pkt-header-global-menu-toggle')
    expect(await axe(el.parentElement as HTMLElement)).toHaveNoViolations()
  })

  test('ingen brudd med åpent søke-overlay', async () => {
    const el = await mount()
    await clickHost(el, '#pkt-header-global-search-toggle')
    expect(await axe(el.parentElement as HTMLElement)).toHaveNoViolations()
  })

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

  test('ingen brudd når menydata feiler', async () => {
    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network')))
    const el = document.createElement('pkt-header-global') as PktHeaderGlobal
    el.position = 'relative'
    Object.assign(el, DESKTOP)
    document.body.appendChild(el)
    await customElements.whenDefined('pkt-header-global')
    await el.updateComplete
    await new Promise((resolve) => setTimeout(resolve, 0))
    await el.updateComplete
    await clickHost(el, '#pkt-header-global-menu-toggle')
    expect(await axe(el.parentElement as HTMLElement)).toHaveNoViolations()
  })
})