import PropTypes from 'prop-types'
import {format} from 'date-fns'
import {fr} from 'date-fns/locale'
import {makeStyles} from '@material-ui/core/styles'

import {
  Typography,
  Divider,
  List,
  ListItemText
} from '@material-ui/core'

import {formatJsonString} from '../../lib/utils/format'

const useStyles = makeStyles(theme => ({
  root: {
    width: '100%',
    maxWidth: '36ch',
    backgroundColor: theme.palette.background.paper
  },
  inline: {
    display: 'inline'
  }
}))

export default function KomanteList({komante}) {
  const classes = useStyles()

  return (
    <List className={classes.root}>
      {komante.map(({_id, username, kontni, sentAt}) => (
        <div key={_id}>
          <ListItemText
            primary={
              <Typography gutterBottom style={{fontWeight: 'bold'}} variant='body1'>
                {username}
              </Typography>
            }
          />
          <ListItemText
            primary={formatJsonString(kontni)}
            secondary={
              <Typography gutterBottom style={{marginBlock: 5, fontStyle: 'italic'}} variant='caption' display='block'>
                {format(new Date(sentAt), 'Pp', {locale: fr})}
              </Typography>
            }
          />
          <Divider style={{marginBottom: '1em'}} />
        </div>
      ))}
    </List>
  )
}

KomanteList.propTypes = {
  komante: PropTypes.array.isRequired
}