import * as React from 'react'
import { axe, toHaveNoViolations } from 'jest-axe'
import { render, screen } from '@testing-library/react'
import '@testing-library/jest-dom'

import { PktTable } from './Table'
import { PktTableHeader } from './TableHeader'
import { PktTableRow } from './TableRow'
import { PktTableBody } from './TableBody'
import { PktTableHeaderCell } from './TableHeaderCell'
import { PktTableDataCell } from './TableDataCell'

expect.extend(toHaveNoViolations)

describe('<PktTable />', () => {
  test('renders correctly with defaultprops', () => {
    render(
      <PktTable>
        <PktTableHeader>
          <PktTableRow>
            <PktTableHeaderCell>Header 1</PktTableHeaderCell>
            <PktTableHeaderCell>Header 2</PktTableHeaderCell>
          </PktTableRow>
        </PktTableHeader>
        <PktTableBody>
          <PktTableRow>
            <PktTableDataCell>Table data 1</PktTableDataCell>
            <PktTableDataCell>Table data 2</PktTableDataCell>
          </PktTableRow>
        </PktTableBody>
      </PktTable>,
    )

    // Assert that the component renders its children correctly
    expect(screen.getByTestId('pkt-table')).toHaveClass('pkt-table--basic')
    expect(screen.getByText('Header 1')).toBeInTheDocument()
    expect(screen.getByText('Header 2')).toBeInTheDocument()
    expect(screen.getByText('Table data 1')).toBeInTheDocument()
    expect(screen.getByText('Table data 2')).toBeInTheDocument()
  })

  test('renders correctly with skin "zebra-blue" and compact set to true', () => {
    render(
      <PktTable skin="zebra-blue" compact>
        <PktTableHeader>
          <PktTableRow>
            <PktTableHeaderCell>Header 1</PktTableHeaderCell>
            <PktTableHeaderCell>Header 2</PktTableHeaderCell>
          </PktTableRow>
        </PktTableHeader>
        <PktTableBody>
          <PktTableRow>
            <PktTableDataCell dataLabel="Header 1">Table data</PktTableDataCell>
            <PktTableDataCell dataLabel="Header 2">Table data</PktTableDataCell>
          </PktTableRow>
        </PktTableBody>
      </PktTable>,
    )

    // Assert that the component applies the props correctly
    expect(screen.getByTestId('pkt-table')).toHaveClass('pkt-table--compact')
    expect(screen.getByTestId('pkt-table')).toHaveClass('pkt-table--zebra-blue')
  })
})