pawol.nu/components/awtis/awtis-detay.js

'use client'

import {useState} from 'react'
import Link from 'next/link'
import PropTypes from 'prop-types'
import Accordion from '@mui/material/Accordion'
import AccordionDetails from '@mui/material/AccordionDetails'
import AccordionSummary from '@mui/material/AccordionSummary'
import Box from '@mui/material/Box'
import Button from '@mui/material/Button'
import CardActionArea from '@mui/material/CardActionArea'
import CardMedia from '@mui/material/CardMedia'
import Chip from '@mui/material/Chip'
import Container from '@mui/material/Container'
import Grid from '@mui/material/Grid'
import Paper from '@mui/material/Paper'
import Card from '@mui/material/Card'
import CardContent from '@mui/material/CardContent'
import Avatar from '@mui/material/Avatar'
import Typography from '@mui/material/Typography'
import {green} from '@mui/material/colors'
import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import KeyboardBackspaceIcon from '@mui/icons-material/KeyboardBackspace'
import VerifiedIcon from '@mui/icons-material/Verified'

import {formatKuveti} from '../../lib/kuveti'
import {StreamButton} from '../streaming-buttons'
import AwtisBiyografi from './awtis-biyografi'
import MizikLyen from './mizik-lyen'

const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const noImageUrl = 'https://place-hold.it/140x140?text=Indisponible'

const sortTeks = paroles => paroles.sort((a, b) => a.titre.localeCompare(b.titre, 'fr', {sensitivity: 'base'}))

function StreamButton({lyen}) {
  const config = PLATFORM_CONFIG[lyen.plateforme] || {label: lyen.plateforme, bg: '#555', color: '#fff', Icon: null}
  const PlatformIcon = config.Icon
  return (
    <Button
      href={lyen.url}
      target='_blank'
      rel='noopener noreferrer'
      size='small'
      startIcon={PlatformIcon ? <PlatformIcon size={16} color={config.color} /> : null}
      endIcon={<OpenInNewIcon sx={{fontSize: 11}} />}
      sx={{
        bgcolor: config.bg,
        color: config.color,
        fontWeight: 700,
        fontSize: '0.72rem',
        textTransform: 'none',
        '&:hover': {bgcolor: config.bg, opacity: 0.85},
      }}
    >
      {config.label}
    </Button>
  )
}

export default function AwtisDetay({anAwtis}) {
  const [esByografiOuve, meteEsByografiOuve] = useState(false)
  const {alias, biographie, paroles, photo, isOKIAwtis, titrePhare} = anAwtis
  const sortedTeks = sortTeks(paroles)
  const gwanBiyo = biographie && biographie.length > 100
  const biyo = gwanBiyo ? `${biographie.slice(0, 100)}...` : biographie

  const hasStreaming = isOKIAwtis && titrePhare?.streamAudio?.length > 0
  const coverUrl = titrePhare?.couverture
    ? `${IMAGE_URL}${titrePhare.couverture.formats?.small?.url || titrePhare.couverture.formats?.thumbnail?.url || titrePhare.couverture.url}`
    : null

  return (
    <Container>
      <Box sx={{mt: 8, mb: 2}}>
        <Typography sx={{textAlign: 'center'}} variant='h6' component='h1'>
          {alias}
        </Typography>
      </Box>

      <Box sx={{display: 'flex', justifyContent: 'center', mb: 2}}>
        <Avatar
          src={photo?.url ? `${IMAGE_URL}${photo?.formats?.small?.url || photo?.formats?.thumbnail?.url || photo?.url}` : noImageUrl}
          alt={`Photo ${alias}`}
          sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
        />
      </Box>

      {isOKIAwtis && (
        <Box sx={{display: 'flex', flexDirection: 'column', alignItems: 'center', gap: 0.75, mb: 2}}>
          <Chip
            icon={<VerifiedIcon sx={{fontSize: 16}} />}
            label='Artiste OKI Exclusif'
            size='small'
            sx={{bgcolor: '#FFD700', color: '#000', fontWeight: 700, '& .MuiChip-icon': {color: '#000'}}}
          />
          <Typography variant='caption' sx={{color: 'text.secondary', textAlign: 'center'}}>
            Paroles publiées en exclusivité sur PAWÒL-NU, avant toute sortie sur les plateformes de streaming.
          </Typography>
        </Box>
      )}

      <Grid sx={{alignItems: 'center'}} container direction='column' spacing={3}>
        {biyo && (
          <Grid size={{xs: 12, md: 6}}>
            <Card sx={{minWidth: 300}}>
              <CardActionArea onClick={() => meteEsByografiOuve(true)}>
                <CardContent>
                  <Typography gutterBottom variant='body1' component='h2'>
                    <strong>Biographie</strong>
                  </Typography>
                  <Typography textalign='justify' variant='subtitle1' component='h3'>
                    {biyo}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          </Grid>
        )}
        {hasStreaming && (
          <Grid size={{xs: 12, md: 6}}>
            <Card sx={{overflow: 'hidden'}}>
              <Grid container>
                {coverUrl && (
                  <Grid size={{xs: 12, sm: 4}}>
                    <CardMedia
                      component='img'
                      image={coverUrl}
                      alt={titrePhare.titre}
                      sx={{height: '100%', minHeight: 140, objectFit: 'cover'}}
                    />
                  </Grid>
                )}
                <Grid size={{xs: 12, sm: coverUrl ? 8 : 12}}>
                  <CardContent>
                    <Typography variant='subtitle1' sx={{fontWeight: 700}} gutterBottom>
                      {titrePhare.titre}
                    </Typography>
                    <Typography variant='caption' sx={{color: 'text.secondary', display: 'block', mb: 1.5}}>
                      Écouter sur
                    </Typography>
                    <Box sx={{display: 'flex', flexWrap: 'wrap', gap: 1}}>
                      {titrePhare.streamAudio.map((lyen, i) => (
                        <StreamButton key={i} lyen={lyen} />
                      ))}
                    </Box>
                  </CardContent>
                </Grid>
              </Grid>
            </Card>
          </Grid>
        )}
        <Grid size={{xs: 12, md: 6}}>
          <Box marginbottom={3}>
            {paroles.length > 1 ? (
              <Accordion>
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls='panel-teks-content'
                  id='panel-teks-header'
                >
                  <Typography sx={{marginRight: 2, textAlign: 'center'}} variant='body1' component='h2'><strong>Liste des paroles</strong></Typography>
                  <Chip color='primary' label={paroles.length} size='small' variant='contained' />
                </AccordionSummary>
                <AccordionDetails sx={{paddingInline: 0}}>
                  {sortedTeks.map(anPawol => {
                    const {couverture} = anPawol
                    const kuvetiFormat = couverture?.formats?.thumbnail || formatKuveti(couverture)
                    return (
                      <Box key={anPawol.id} sx={{paddingBlock: 0.5}}>
                        <MizikLyen anPawol={anPawol} kuveti={kuvetiFormat} />
                      </Box>
                    )
                  })}
                </AccordionDetails>
              </Accordion>
            ) : (
              paroles.length === 0 ? (
                <Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Aucune parole pour le moment</strong></Typography>
              ) : (
                <Box>
                  <Typography gutterBottom textalign='center' variant='body1' component='h2'><strong>Parole</strong></Typography>
                  <Paper sx={{height: '100%', paddingBlock: 2}}>
                    <MizikLyen anPawol={paroles[0]} kuveti={paroles[0].couverture?.formats?.thumbnail || formatKuveti(paroles[0].couverture)} />
                  </Paper>
                </Box>
              )
            )}
          </Box>
        </Grid>
      </Grid>

      <Box sx={{textAlign: 'center', marginBlock: 3}}>
        <Link passHref href='/awtis'>
          <Button variant='outlined' startIcon={<KeyboardBackspaceIcon />}>
            Retour aux artistes
          </Button>
        </Link>
      </Box>

      {esByografiOuve && (
        <AwtisBiyografi
          alias={alias}
          paroles={paroles}
          biographie={biographie}
          esByografiOuve={esByografiOuve}
          meteEsByografiOuve={meteEsByografiOuve}
        />
      )}
    </Container>
  )
}

AwtisDetay.propTypes = {
  anAwtis: PropTypes.object.isRequired
}