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

import {useState} from 'react'
import PropTypes from 'prop-types'
import {Accordion, AccordionDetails, AccordionSummary, Box, Button, CardActionArea, Chip, Container, Grid, Paper} from '@mui/material'
import {useRouter} from 'next/router'
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 AwtisBiyografi from './awtis-biyografi'
import MizikLis from './mizik-lis'

const API_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:1337'

const sortTeks = teks => teks.sort((a, b) => b.id - a.id)

export default function AwtisDetay({anAwtis}) {
  const router = useRouter()
  const [esByografiOuve, meteEsByografiOuve] = useState(false)
  const {alias, biyografi, teks, foto} = anAwtis
  const sortedTeks = sortTeks(teks)
  const gwanBiyo = anAwtis.biyografi.length > 100

  const biyo = gwanBiyo ? `${anAwtis.biyografi.slice(0, 100)}...` : anAwtis.biyografi

  const handleClick = () => {
    meteEsByografiOuve(true)
  }

  const handleBack = () => {
    const href = '/awtis?paj&paj=1'
    const as = '/awtis/paj/1'
    router.push(href, as)
  }

  return (
    <Container>
      <Box sx={{marginBlock: 2}}>
        <Typography textAlign='center' variant='h6' component='h1'>
          {alias}
        </Typography>
      </Box>
      <Box sx={{justifyContent: 'center', display: 'flex'}}>
        <Avatar
          src={`${API_URL}${foto[0].url}`}
          alt={`Photo ${alias}`}
          sx={{width: 200, height: 200, border: `2px solid ${green[500]}`}}
        />
      </Box>
      <Box sx={{textAlign: 'center', marginTop: 2}} >
        <Button variant='outlined' startIcon={<KeyboardBackspaceIcon />} onClick={handleBack}>
          Listes des artistes
        </Button>
      </Box>
      <Grid container direction='column' justifyContent='center' alignItems='center' spacing={3} sx={{marginTop: 2}}>
        {biyo && (
          <Grid item xs={12} md={6}>
            <Card sx={{minWidth: 300}}>
              <CardActionArea onClick={handleClick}>
                <CardContent>
                  <Typography gutterBottom variant='body1' component='h2'>
                    <strong>Biographie</strong>
                  </Typography>
                  <Typography textAlign='justify' variant='subtitle1' component='h3'>
                    {biyo}
                  </Typography>
                </CardContent>
              </CardActionArea>
            </Card>
          </Grid>
        )}
        <Grid item xs={12} md={6}>
          <Box marginBottom={5}>
            {teks.length > 1 ? (
              <Accordion>
                <AccordionSummary
                  expandIcon={<ExpandMoreIcon />}
                  aria-controls='panel-teks-content'
                  id='panel-teks-header'
                >
                  <Typography marginRight={2} textAlign='center' variant='body1' component='h2'><strong>Liste des textes</strong></Typography>
                  <Chip color='primary' label={teks.length} size='small' variant='contained' />
                </AccordionSummary>
                <AccordionDetails>
                  <MizikLis teks={sortedTeks} />
                </AccordionDetails>
              </Accordion>
            ) : (
              <>
                <Typography gutterBottom textAlign='center' variant='body1' component='h2'><strong>Texte</strong></Typography>
                <Paper>
                  <MizikLis teks={teks} />
                </Paper>
              </>
            )}
          </Box>
        </Grid>
      </Grid>
      {esByografiOuve && (
        <AwtisBiyografi
          alias={alias}
          teks={teks}
          biyografi={biyografi}
          esByografiOuve={esByografiOuve}
          meteEsByografiOuve={meteEsByografiOuve}
        />
      )}
    </Container>
  )
}

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