import { render, screen } from '@testing-library/react'
import { ThemeProvider } from 'styled-components'

import Table from './table'
import type { HeaderType } from './table'
import { theme } from './theme.js'
import Pill from './pill'

describe('<Table>', () => {
  const headers: HeaderType[] = [
    { field: 'firstname', label: 'First Name' },
    { field: 'lastname', label: 'Last Name' },
    { field: 'age', label: 'Age', align: 'right' },
  ]

  it('renders the table with correct cell count and data', () => {
    const rows = [
      {
        firstname: 'Johnny',
        lastname: 'Appleseed',
        age: '25',
      },
      {
        firstname: 'Maid',
        lastname: 'Marion',
        age: '18',
      },
      {
        firstname: 'Peter',
        lastname: 'Parker',
        age: '20',
      },
    ]
    const { asFragment } = render(
      <ThemeProvider theme={theme}>
        <Table name="test table" headers={headers} rows={rows} />
      </ThemeProvider>
    )

    expect(asFragment()).toMatchSnapshot()

    expect(screen.getByRole('table')).toBeInTheDocument()
    expect(screen.getByLabelText('test table')).toBeInTheDocument()
    expect(screen.getAllByRole('columnheader').length).toEqual(3)
    expect(screen.getAllByRole('rowgroup')[1].childElementCount).toEqual(3)

    const firstRow = screen.getByTestId('table:row:1')
    expect(firstRow.childElementCount).toEqual(3)
    expect(screen.getByTestId(/table:row-1:column-1/)).toEqual(firstRow.childNodes[0])
    expect(screen.getByTestId(/table:row-1:column-2/)).toEqual(firstRow.childNodes[1])
    expect(screen.getByTestId(/table:row-1:column-3/)).toEqual(firstRow.childNodes[2])

    const secondRow = screen.getByTestId('table:row:2')
    expect(secondRow.childElementCount).toEqual(3)
    expect(screen.getByTestId(/table:row-2:column-1/)).toEqual(secondRow.childNodes[0])
    expect(screen.getByTestId(/table:row-2:column-2/)).toEqual(secondRow.childNodes[1])
    expect(screen.getByTestId(/table:row-2:column-3/)).toEqual(secondRow.childNodes[2])

    const lastRow = screen.getByTestId('table:row:3')
    expect(lastRow.childElementCount).toEqual(3)
    expect(screen.getByTestId(/table:row-3:column-1/)).toEqual(lastRow.childNodes[0])
    expect(screen.getByTestId(/table:row-3:column-2/)).toEqual(lastRow.childNodes[1])
    expect(screen.getByTestId(/table:row-3:column-3/)).toEqual(lastRow.childNodes[2])
  })
  it('renders the rows with custom components and data', () => {
    const testid = 'custom-component'
    const AgePill = (age) => (
      <Pill data-testid={testid} variant="positive">
        {age}
      </Pill>
    )
    const rows = [
      {
        firstname: 'Johnny',
        lastname: 'Appleseed',
        age: AgePill(25),
      },
      {
        firstname: 'Maid',
        lastname: 'Marion',
        age: AgePill(18),
      },
    ]
    const { asFragment } = render(
      <ThemeProvider theme={theme}>
        <Table name="test table" headers={headers} rows={rows} />
      </ThemeProvider>
    )

    expect(asFragment()).toMatchSnapshot()

    const ageCells = screen.getAllByTestId(testid)
    expect(ageCells.length).toEqual(2)
    expect(ageCells[0]).toHaveTextContent('25')
    expect(ageCells[1]).toHaveTextContent('18')

    const firstNameCells = screen.getAllByTestId(/:column-1/)
    expect(firstNameCells.length).toEqual(2)
    expect(firstNameCells[0]).toHaveTextContent('Johnny')
    expect(firstNameCells[1]).toHaveTextContent('Maid')
  })
})