import { fireEvent, render as originalRender } from '@testing-library/react'
import { ReactNode } from 'react'

import { PktMessagebox } from './Messagebox'

describe('Messagebox', () => {
  const render = (jsx: ReactNode) => {
    const renderResult = originalRender(jsx)
    const messageBox = renderResult.container.children[0]
    return { ...renderResult, messageBox }
  }

  it('render with defaults', async () => {
    const { messageBox } = render(<PktMessagebox />)

    expect(messageBox.className).toEqual('pkt-messagebox')
  })

  it('render with skin', async () => {
    const { messageBox } = render(<PktMessagebox skin={'green'} />)

    expect(messageBox.classList).toContain('pkt-messagebox--green')
  })

  it('render compact', async () => {
    const { messageBox } = render(<PktMessagebox compact />)

    expect(messageBox.classList).toContain('pkt-messagebox--compact')
  })

  it('render simple title', async () => {
    const { getByText } = render(<PktMessagebox title={'Messagebox title'} />)
    const titleElement = getByText('Messagebox title')
    expect(titleElement.classList).toContain('pkt-messagebox__title')
  })
  it('render complex title', async () => {
    const { messageBox } = render(
      <PktMessagebox
        title={
          <>
            Message<strong>box</strong> title
          </>
        }
      />,
    )
    const titleElement = messageBox.querySelector('.pkt-messagebox__title')!
    expect(titleElement.innerHTML).toEqual('Message<strong>box</strong> title')
  })

  it('should not render empty title element when no title specified', async () => {
    const { messageBox } = render(<PktMessagebox title={''} />)
    expect(messageBox.querySelector('.pkt-messagebox__title')).not.toBeInTheDocument()
  })

  it('closable', async () => {
    const { getByRole, messageBox } = render(<PktMessagebox closable />)
    const closeButton = getByRole('button', { name: 'Lukk' })

    fireEvent.click(closeButton)

    expect(messageBox.classList).toContain('pkt-hide')
  })
})