'use client'

import PropTypes from 'prop-types'
import {useRouter} from 'next/navigation'
import Image from 'next/image'
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 Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Grid from '@mui/material/Grid'
import ExplicitIcon from '@mui/icons-material/Explicit'
import {styled} from '@mui/material/styles'

import {getAlias} from '../../lib/utils/get-alias'
import {formatKuveti} from '../../lib/kuveti'

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

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

const StyledGrid = styled(Grid)({
  [`& .${classes.root}`]: {
    maxWidth: 345
  },
})

const BLUR_DATA_URL = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNsYAAAAAYAAjCB0C8AAAAASUVORK5CYII='

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

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

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

  return (
    <StyledGrid size={{xs: 12, sm: 6, md: 4}}>
      <Card className={classes.root}>
        <CardActionArea onClick={() => handleClick(slug)}>
          <Box sx={{position: 'relative', height: 240}}>
            {couverture?.url ? (
              <Image
                fill
                src={`${IMAGE_URL}${formatKuveti(couverture, 'thumbnail')?.url}`}
                alt={titre}
                placeholder='blur'
                blurDataURL={BLUR_DATA_URL}
                sizes='(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw'
                style={{objectFit: 'contain'}}
              />
            ) : (
              <Box sx={{width: '100%', height: '100%', bgcolor: 'grey.300'}} />
            )}
          </Box>
          <CardContent>
            <Box sx={{display: 'flex', alignItems: 'center'}}>
              <Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
                {titre}
              </Typography>
              {parole.creativeCommons && (
                <Box marginInline={1}>
                  <Image
                    width={24}
                    height={24}
                    title='Creative Commons'
                    alt='ccheart_red'
                    src='/images/cc/icons/ccheart_red.svg'
                  />
                </Box>
              )}

              {parole.explicitLyrics && (
                <ExplicitIcon style={{marginRight: 5}} color='error' fontSize='small' />
              )}
            </Box>
            <Box sx={{textAlign: 'start'}}>
              <Typography variant='body2' color='textSecondary' component='p'>
                {aliases}
              </Typography>
              <Typography variant='body2' color='textSecondary' component='p'>
                {annee}
              </Typography>
              <Typography sx={{fontStyle: 'italic'}} variant='caption'>
                {parole.user && (
                  <>
                    (<i>parole soumise par {parole.user.username}</i>)
                  </>
                )}
                {parole.userAdmin && !parole.user && (
                  <>
                    (<i>parole soumise par {parole.userAdmin}</i>)
                  </>
                )}
              </Typography>
              <Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
                Publiée le : {datPiblikasyon}
              </Typography>
            </Box>
          </CardContent>
        </CardActionArea>
      </Card>
    </StyledGrid>
  )
}

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