/**
 * (share/ui/table — table chrome, footer, sort column icons).
 */
import React from 'react'
import { render, screen } from '@testing-library/react'
import {
  Table,
  TableBody,
  TableCaption,
  TableCell,
  TableFooter,
  TableHead,
  TableHeader,
  TableRow,
  TableSortCol,
} from '@/share/ui/table'

jest.mock('@/share/icons', () => ({
  ArrowUp: () => <span data-testid="arrow-up" />,
  ArrowDown: () => <span data-testid="arrow-down" />,
  ArrowUpDown: () => <span data-testid="arrow-up-down" />,
}))

describe('[share/ui/table]', () => {
  describe('basic table', () => {
    it('renders header and body cells', () => {
      render(
        <Table>
          <TableHeader>
            <TableRow>
              <TableHead>Name</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell>Value</TableCell>
            </TableRow>
          </TableBody>
        </Table>,
      )
      expect(screen.getByText('Name')).toBeInTheDocument()
      expect(screen.getByText('Value')).toBeInTheDocument()
    })

    it('renders caption, footer, and endIcon on head', () => {
      render(
        <Table>
          <TableCaption>Caption</TableCaption>
          <TableHeader>
            <TableRow>
              <TableHead endIcon={<span data-testid="head-icon" />}>Name</TableHead>
            </TableRow>
          </TableHeader>
          <TableBody>
            <TableRow>
              <TableCell>Header cell</TableCell>
            </TableRow>
          </TableBody>
          <TableFooter>
            <TableRow>
              <TableCell>Total</TableCell>
            </TableRow>
          </TableFooter>
        </Table>,
      )

      expect(screen.getByText('Caption')).toBeInTheDocument()
      expect(screen.getByText('Header cell').closest('td')).toBeInTheDocument()
      expect(screen.getByTestId('head-icon')).toBeInTheDocument()
      expect(screen.getByText('Total')).toBeInTheDocument()
    })
  })

  describe('TableSortCol', () => {
    it('shows icons for asc, desc, idle, and hides when not shown', () => {
      const { rerender } = render(<TableSortCol isShow sort="asc" />)
      expect(screen.getByTestId('arrow-up')).toBeInTheDocument()

      rerender(<TableSortCol isShow sort="desc" />)
      expect(screen.getByTestId('arrow-down')).toBeInTheDocument()

      rerender(<TableSortCol isShow />)
      expect(screen.getByTestId('arrow-up-down')).toBeInTheDocument()

      rerender(<TableSortCol isShow={false} />)
      expect(screen.queryByTestId('arrow-up')).not.toBeInTheDocument()
      expect(screen.queryByTestId('arrow-down')).not.toBeInTheDocument()
      expect(screen.queryByTestId('arrow-up-down')).not.toBeInTheDocument()
    })
  })
})
