import * as React from 'react'
import PropTypes from 'prop-types'
import Table from '@mui/material/Table'
import TableBody from '@mui/material/TableBody'
import TableCell from '@mui/material/TableCell'
import TableContainer from '@mui/material/TableContainer'
import TableHead from '@mui/material/TableHead'
import TableRow from '@mui/material/TableRow'
import Paper from '@mui/material/Paper'
import Button from '@mui/material/Button'
import {TableVirtuoso} from 'react-virtuoso'
import {Box, Typography} from '@mui/material'
import {formatDate} from '@/lib/format.js'

const columns = [
  {
    width: 200,
    label: 'Version',
    dataKey: 'name',
  },
  {
    width: 120,
    label: 'Créée le',
    dataKey: 'date_created',
    numeric: true,
  }
]

const VirtuosoTableComponents = {
  Scroller: React.forwardRef((props, ref) => (
    <TableContainer component={Paper} {...props} ref={ref} />
  )),
  Table: props => (
    <Table {...props} sx={{borderCollapse: 'separate', tableLayout: 'fixed'}} />
  ),
  TableHead: React.forwardRef((props, ref) => <TableHead {...props} ref={ref} />),
  TableRow,
  TableBody: React.forwardRef((props, ref) => <TableBody {...props} ref={ref} />),
}

function fixedHeaderContent() {
  return (
    <TableRow>
      {columns.map(column => (
        <TableCell
          key={column.dataKey}
          variant='head'
          align={column.numeric || false ? 'right' : 'left'}
          style={{width: column.width}}
          sx={{backgroundColor: 'background.paper'}}
        >
          {column.label}
        </TableCell>
      ))}
    </TableRow>
  )
}

function rowContent(_index, row) {
  return (
    <>
      {columns.map(column => (
        <TableCell
          key={column.dataKey}
          align={column.numeric || false ? 'right' : 'left'}
        >
          {column.dataKey === 'date_created' ? formatDate(row[column.dataKey], 'Pp') : <Button variant='outlined' color='success'>{row[column.dataKey]}</Button>}
        </TableCell>
      ))}
    </>
  )
}

export default function ListVersions({collection, data}) {
  return (
    <Box>
      <Typography variant='button' textAlign='center' sx={{display: 'block', fontWeight: 'bold'}}>
        {collection}
      </Typography>
      <Paper style={{height: 350, width: '100%', marginBlock: 5}}>
        <TableVirtuoso
          data={data}
          components={VirtuosoTableComponents}
          fixedHeaderContent={fixedHeaderContent}
          itemContent={rowContent}
        />
      </Paper>
    </Box>
  )
}

ListVersions.propTypes = {
  collection: PropTypes.oneOf(['titres', 'articles']).isRequired,
  data: PropTypes.array.isRequired
}