import PropTypes from 'prop-types'
import {format} from 'date-fns'
import {fr} from 'date-fns/locale'
import {styled} from '@mui/material/styles'

import {
  Typography,
  Divider,
  List,
  ListItemText
} from '@mui/material'

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

const PREFIX = 'komante-list'

const classes = {
  root: `${PREFIX}-root`,
  inline: `${PREFIX}-inline`
}

const StyledList = styled(List)((
  {
    theme
  }
) => ({
  [`&.${classes.root}`]: {
    width: '100%',
    maxWidth: '36ch',
    backgroundColor: theme.palette.background.paper
  },

  [`& .${classes.inline}`]: {
    display: 'inline'
  }
}))

export default function KomanteList({komante}) {
  return (
    <StyledList 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>
      ))}
    </StyledList>
  )
}

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