'use client'

import PropTypes from 'prop-types'
import {useRouter} from 'next/navigation'
import {format} from 'date-fns'
import {fr} from 'date-fns/locale'
import Card from '@mui/material/Card'

import CardActionArea from '@mui/material/CardActionArea'
import CardContent from '@mui/material/CardContent'
import CardMedia from '@mui/material/CardMedia'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Grid from '@mui/material/Unstable_Grid2'
import ExplicitIcon from '@mui/icons-material/Explicit'
import {styled} from '@mui/material/styles'
import {Peertube} from '@icons-pack/react-simple-icons'

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

const PREFIX = 'teks-kat'
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'

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

const StyledGrid = styled(Grid)({
  [`& .${classes.root}`]: {
    maxWidth: 345
  },
  [`& .${classes.media}`]: {
    height: 240,
    objectFit: 'contain'
  }
})

const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'

export default function TeksKat({parole}) {
  const router = useRouter()
  const {attributes} = parole
  const {titre, artistes, annee, couverture, publishedAt, slug} = attributes

  const datPiblikasyon = format(new Date(publishedAt), 'P', {locale: fr})
  const aliases = getAlias(artistes, attributes.prioriteArtistes)

  const handleClick = slug => {
    router.push(`/paroles/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
  }

  return (
    <StyledGrid xs={12} sm={6} md={4}>
      <Card className={classes.root}>
        <CardActionArea onClick={() => handleClick(slug)}>
          <CardMedia
            className={classes.media}
            component='img'
            alt={titre}
            image={couverture?.data?.attributes?.url ? `${IMAGE_URL}${couverture.data.attributes.url}` : noImageUrl}
            title={titre}
          />
          <CardContent>
            <Box sx={{display: 'flex', alignItems: 'center'}}>
              <Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
                {titre}
              </Typography>
              {attributes.gadeEmbed && !attributes.okiMizikID && (
                <Peertube style={{marginRight: 5}} fontSize='small' />
              )}
              {attributes.explicitLyrics && (
                <ExplicitIcon style={{marginRight: 5}} color='secondary' fontSize='small' />
              )}
            </Box>
            <Typography variant='body2' color='textSecondary' component='p'>
              {aliases}
            </Typography>
            <Typography variant='body2' color='textSecondary' component='p'>
              {annee}
            </Typography>
            <Typography sx={{fontStyle: 'italic'}} variant='caption'>
              {attributes.user && (
                <>
                  (<i>parole soumise par {attributes.user.username}</i>)
                </>
              )}
              {attributes.userAdmin && !attributes.user && (
                <>
                  (<i>parole soumise par {attributes.userAdmin}</i>)
                </>
              )}
            </Typography>
            <Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
              Publiée le : {datPiblikasyon}
            </Typography>
          </CardContent>
        </CardActionArea>
      </Card>
    </StyledGrid>
  )
}

TeksKat.propTypes = {
  parole: PropTypes.object.isRequired
}