import '@testing-library/jest-dom'

import { render, screen } from '@testing-library/react'
import { axe, toHaveNoViolations } from 'jest-axe'
import { createRef } from 'react'

import { PktStep } from './Step'
import { PktStepper } from './Stepper'

expect.extend(toHaveNoViolations)

describe('PktStepper', () => {
  test('renders without errors', () => {
    render(
      <PktStepper activeStep={0}>
        <PktStep title="test" status="completed">
          content
        </PktStep>
        <PktStep title="test" status="current">
          content
        </PktStep>
        <PktStep title="test" status="incomplete">
          content
        </PktStep>
      </PktStepper>,
    )
    // Assert that the Stepper component renders without throwing any errors
  })

  test('ref works correctly', () => {
    const ref = createRef<HTMLOListElement>()
    const { unmount } = render(
      <PktStepper ref={ref} activeStep={0}>
        <PktStep title="test" status="current">
          content
        </PktStep>
      </PktStepper>,
    )
    expect(ref.current).toBeInstanceOf(HTMLOListElement)

    unmount()
    expect(ref.current).toBe(null)
  })

  test('renders children', () => {
    render(
      <PktStepper activeStep={0}>
        <PktStep title="Title 1" status="completed">
          Content 1
        </PktStep>
        <PktStep title="Title 2" status="current">
          Content 2
        </PktStep>
      </PktStepper>,
    )

    // Assert that the Step component renders its children correctly
    expect(screen.getByText('Title 1')).toBeInTheDocument()
    expect(screen.getByText('Content 1')).toBeInTheDocument()
    expect(screen.getByText('Title 2')).toBeInTheDocument()
    expect(screen.getByText('Content 2')).toBeInTheDocument()
  })

  test('applies orientation and status correctly ', () => {
    render(
      <>
        <PktStepper orientation="horizontal" activeStep={0}>
          <PktStep title="Title" status="current">
            Content
          </PktStep>
        </PktStepper>
      </>,
    )
    // Assert that the Accordion component applies the props correctly
    expect(screen.getByTestId('pkt-stepper')).toHaveClass('pkt-stepper--horizontal')
    expect(screen.getByTestId('pkt-step')).toHaveClass('pkt-step--current')
  })

  describe('accessibility', () => {
    it('renders with no wcag errors with axe', async () => {
      const { container } = render(
        <PktStepper activeStep={0}>
          <PktStep title="Title 1" status="completed">
            Content 1
          </PktStep>
          <PktStep title="Title 2" status="current">
            Content 2
          </PktStep>
        </PktStepper>,
      )
      const results = await axe(container)
      expect(results).toHaveNoViolations()
    })
  })
})