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

import './header'
import type { PktHeader } from './header'
import { EXAMPLE_HEADER_FOOTER_DATA } from 'shared-utils/header-footer'

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()
})

// Zero breakpoints via attributes (so the wrapper forwards them) → desktop layout
// with an inline search field.
const mountGlobal = async (props: Record<string, unknown> = {}): Promise<PktHeader> => {
  const el = document.createElement('pkt-header') as PktHeader
  el.type = 'global'
  el.position = 'relative'
  el.setAttribute('mobile-breakpoint', '0')
  el.setAttribute('tablet-breakpoint', '0')
  el.data = EXAMPLE_HEADER_FOOTER_DATA
  Object.assign(el, props)
  document.body.appendChild(el)
  await customElements.whenDefined('pkt-header')
  await el.updateComplete
  await new Promise((resolve) => setTimeout(resolve, 0))
  const inner = el.querySelector('pkt-header-global') as HTMLElement & { updateComplete: Promise<unknown> }
  await inner?.updateComplete
  await new Promise((resolve) => setTimeout(resolve, 0))
  await inner?.updateComplete
  return el
}

describe('pkt-header (wrapper) – global', () => {
  test('søkefeltet henter placeholder og spørringsparametere fra API-dataene', async () => {
    const el = await mountGlobal()
    const input = el.querySelector<HTMLInputElement>('input[type="search"]')
    const form = el.querySelector<HTMLFormElement>('form[role="search"]')

    // Placeholder comes from the API payload, not the wrapper's service default «Søk».
    expect(input).toHaveAttribute('placeholder', 'Søk i hele nettstedet')
    expect(input).toHaveAttribute('name', 'q')
    expect(form).toHaveAttribute('action', 'https://www.oslo.kommune.no/sokeresultat/')
    expect(form).toHaveAttribute('method', 'get')
  })

  test('viser søk som standard (showSearch er av i service, på i global)', async () => {
    const el = await mountGlobal()
    expect(el.querySelector('input[type="search"]')).toBeInTheDocument()
  })

  test('eksplisitt search-placeholder overstyrer API-verdien', async () => {
    const el = await mountGlobal()
    el.setAttribute('search-placeholder', 'Egendefinert')
    await el.updateComplete
    const inner = el.querySelector('pkt-header-global') as HTMLElement & {
      updateComplete: Promise<unknown>
    }
    await inner.updateComplete
    expect(el.querySelector('input[type="search"]')).toHaveAttribute('placeholder', 'Egendefinert')
  })
})