import '@testing-library/jest-dom'

import { fireEvent, render } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'
import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'
import { afterEach, describe, expect, test, vi } from 'vitest'

import { PktHeaderGlobal } from './HeaderGlobal'

expect.extend(toHaveNoViolations)

// 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 renderGlobal = (props = {}) =>
  render(<PktHeaderGlobal data={EXAMPLE_HEADER_FOOTER_DATA} position="relative" {...props} />)

afterEach(() => {
  vi.unstubAllGlobals()
})

describe('PktHeaderGlobal – tilgjengelighet', () => {
  test('ingen brudd i standardvisning (desktop)', async () => {
    const { container } = renderGlobal(DESKTOP)
    expect(await axe(container)).toHaveNoViolations()
  })

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

  test('ingen brudd med innlogget bruker', async () => {
    const { container } = renderGlobal({
      ...DESKTOP,
      user: { name: 'Aksel Web Opdahl' },
      logOutButtonPlacement: 'userMenu',
      logOut: vi.fn(),
    })
    expect(await axe(container)).toHaveNoViolations()
  })

  test('ingen brudd med åpen megameny', async () => {
    const { container } = renderGlobal(DESKTOP)
    fireEvent.click(container.querySelector('#pkt-header-global-menu-toggle') as Element)
    expect(await axe(container)).toHaveNoViolations()
  })

  test('ingen brudd med åpent søke-overlay', async () => {
    const { container } = renderGlobal()
    fireEvent.click(container.querySelector('#pkt-header-global-search-toggle') as Element)
    expect(await axe(container)).toHaveNoViolations()
  })

  test('ingen brudd med åpen brukermeny', async () => {
    const { container } = renderGlobal({
      ...DESKTOP,
      user: { name: 'Aksel Web Opdahl' },
      logOutButtonPlacement: 'userMenu',
      logOut: vi.fn(),
    })
    fireEvent.click(container.querySelector('.pkt-header-global__user-button') as Element)
    expect(await axe(container)).toHaveNoViolations()
  })

  test('ingen brudd når menydata feiler', async () => {
    vi.stubGlobal('fetch', vi.fn().mockRejectedValue(new Error('network')))
    const { container, findByRole } = render(<PktHeaderGlobal position="relative" {...DESKTOP} />)
    const menuButton = await findByRole('button', { name: /Meny/ })
    fireEvent.click(menuButton)
    expect(await axe(container)).toHaveNoViolations()
  })

  test('menyknappen har aria-expanded og aria-controls', () => {
    const { container } = renderGlobal(DESKTOP)
    const toggle = container.querySelector('#pkt-header-global-menu-toggle') as HTMLElement
    expect(toggle).toHaveAttribute('aria-controls', 'pkt-header-global-menu')
    expect(toggle).toHaveAttribute('aria-expanded', 'false')

    fireEvent.click(toggle)
    expect(
      container.querySelector('#pkt-header-global-menu-toggle'),
    ).toHaveAttribute('aria-expanded', 'true')
  })
})