import { beforeEach, describe, expect, it } from 'vitest'
import { elementUpdated, fixture, html } from '@open-wc/testing-helpers'
import './UsModalHeader'
import type { UsModalHeader } from './UsModalHeader'
import { EnumModalHeaderTypes } from './model/IModalHeaderProps'

describe('UsHeader', () => {
  let header: UsModalHeader
  const expectedTitle = 'Test Title'
  const expectedDescription = 'Test Description'

  function getShadowRootElement(selector: string): HTMLElement | null {
    return header.shadowRoot!.querySelector(selector)
  }

  beforeEach(async () => {
    header = await fixture(html`<us-modal-header 
      .headerTitle="${expectedTitle}"
    ></us-modal-header>`)
  })

  it('should display default structure', () => {
    expect(header).toBeDefined()
    expect(header.tagName).toBe('US-MODAL-HEADER')
  })

  it('check passed props', () => {
    expect(header.headerTitle).toBe(expectedTitle)
    expect(header.headerDescription).toBe('')
    expect(header.type).toBe('default')
    expect(header.dataTestId).toBe('header')
  })

  it('renders header title and description', async () => {
    header.headerDescription = expectedDescription
    header.headerTitle = expectedTitle
    await elementUpdated(header)

    const title = getShadowRootElement('.us-modal-header__title')?.textContent?.trim()
    const description = getShadowRootElement('.us-modal-header__description')?.textContent?.trim()

    expect(title).toBe(expectedTitle)
    expect(description).toBe(expectedDescription)
  })

  it('renders header with icon for non-default type', async () => {
    header.type = EnumModalHeaderTypes.SUCCESS
    await elementUpdated(header)

    const icon = getShadowRootElement('.us-modal-header__icon')

    expect(icon).not.toBeNull()
  })
})