'use client'

import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Avatar from '@mui/material/Avatar'
import Typography from '@mui/material/Typography'
import Chip from '@mui/material/Chip'
import Link from 'next/link'

function formatAuteur(commentaire) {
  if (commentaire.origine === 'activitypub') {
    return commentaire.auteurNom || commentaire.auteurHandle || 'Yon moun'
  }

  return commentaire.user?.username || 'Anonim'
}

export default function Komante({commentaires}) {
  if (!commentaires || commentaires.length === 0) {
    return null
  }

  return (
    <Box sx={{maxWidth: 700, margin: '2em auto 0'}}>
      <Typography gutterBottom variant='h6'>
        Komantè
      </Typography>
      {commentaires.map(commentaire => {
        const auteur = formatAuteur(commentaire)
        const estFedere = commentaire.origine === 'activitypub'

        return (
          <Box key={commentaire.id} sx={{display: 'flex', gap: 1.5, mb: 2}}>
            <Avatar src={commentaire.auteurAvatarUrl} alt={auteur} />
            <Box sx={{flex: 1}}>
              <Typography variant='subtitle2' component='div'>
                {estFedere && commentaire.auteurProfilUrl ? (
                  <Link href={commentaire.auteurProfilUrl} target='_blank' rel='noopener noreferrer'>
                    {auteur}
                  </Link>
                ) : auteur}
                {estFedere && (
                  <Chip label='Mastodon' size='small' sx={{ml: 1}} />
                )}
              </Typography>
              <Typography variant='body2'>{commentaire.contenu}</Typography>
              {estFedere && commentaire.remoteUrl && (
                <Link href={commentaire.remoteUrl} target='_blank' rel='noopener noreferrer'>
                  <Typography variant='caption' color='text.secondary'>Voir sur Mastodon</Typography>
                </Link>
              )}
            </Box>
          </Box>
        )
      })}
    </Box>
  )
}

Komante.propTypes = {
  commentaires: PropTypes.array
}