'use client'

import PropTypes from 'prop-types'
import Box from '@mui/material/Box'
import Stack from '@mui/material/Stack'
import Avatar from '@mui/material/Avatar'
import Typography from '@mui/material/Typography'
import Chip from '@mui/material/Chip'
import Link from 'next/link'
import {Mastodon} from '@icons-pack/react-simple-icons'

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

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

function formatDat(commentaire) {
  if (!commentaire.datePublication) {
    return null
  }

  return new Intl.DateTimeFormat(undefined, {dateStyle: 'short', timeStyle: 'short'})
    .format(new Date(commentaire.datePublication))
}

const MENTION_REGEX = /(?:@[\w.-]+){1,2}/g

function metanValèMansyon(contenu) {
  const mansyon = contenu.match(MENTION_REGEX) || []
  return contenu.split(MENTION_REGEX).flatMap((moso, index) => (
    mansyon[index] ? [
      moso,
      <Box key={index} component='span' sx={{color: 'primary.main', fontWeight: 700}}>
        {mansyon[index]}
      </Box>
    ] : [moso]
  ))
}

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è ({commentaires.length})
      </Typography>
      <Stack spacing={1.5}>
        {commentaires.map(commentaire => {
          const auteur = formatAuteur(commentaire)
          const estFedere = commentaire.origine === 'activitypub'
          const dat = formatDat(commentaire)

          return (
            <Box
              key={commentaire.id}
              sx={{
                display: 'flex',
                gap: 1.5,
                p: 2,
                borderRadius: 2,
                bgcolor: 'action.hover'
              }}
            >
              <Avatar src={commentaire.auteurAvatarUrl} alt={auteur} />
              <Box sx={{flex: 1, minWidth: 0}}>
                <Stack direction='row' alignItems='center' flexWrap='wrap' rowGap={0.5}>
                  <Stack direction='row' alignItems='center' spacing={1}>
                    <Typography variant='subtitle2' component='div'>
                      {estFedere && commentaire.auteurProfilUrl ? (
                        <Link href={commentaire.auteurProfilUrl} target='_blank' rel='noopener noreferrer'>
                          {auteur}
                        </Link>
                      ) : auteur}
                    </Typography>
                    {estFedere && (
                      <Chip
                        label='Mastodon'
                        size='small'
                        icon={<Mastodon size={14} color='#6364FF' title='' />}
                      />
                    )}
                  </Stack>
                  {dat && (
                    <Typography variant='caption' color='text.secondary' sx={{ml: 'auto', pl: 2}}>
                      {dat}
                    </Typography>
                  )}
                </Stack>
                <Typography variant='body2' sx={{mt: 0.5}}>{metanValèMansyon(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>
          )
        })}
      </Stack>
    </Box>
  )
}

Komante.propTypes = {
  commentaires: PropTypes.array
}