'use client'

import {useState} from 'react'
import {useRouter} from 'next/navigation'
import PropTypes from 'prop-types'

import CardActionArea from '@mui/material/CardActionArea'
import Grid from '@mui/material/Grid2'
import Card from '@mui/material/Card'
import CardMedia from '@mui/material/CardMedia'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'

import {styled} from '@mui/material/styles'

import AwtisBiyografi from './awtis-biyografi'

const PREFIX = 'awtis-kat'
const SITE_URL = process.env.NEXT_PUBLIC_SITE_URL || 'http://localhost:3001'
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'

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

const Kat = styled('div')((
  {
    theme
  }
) => ({
  [`& .${classes.media}`]: {
    height: 240,
    objectFit: 'contain'
  },

  [`& .${classes.expand}`]: {
    transform: 'rotate(0deg)',
    marginLeft: 'auto',
    transition: theme.transitions.create('transform', {
      duration: theme.transitions.duration.shortest
    })
  },

  [`& .${classes.expandOpen}`]: {
    transform: 'rotate(180deg)'
  }
}))

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

export default function AwtisKat({artiste}) {
  const router = useRouter()
  const [esByografiOuve, meteEsByografiOuve] = useState(false)

  const {alias, biographie, paroles, photo, slug} = artiste

  return (
    <Grid size={{xs: 12, sm: 6, md: 4}}>
      <Kat>
        <Card sx={{maxWidth: 340}}>
          <CardActionArea onClick={() => router.push(`${SITE_URL}/awtis/${slug}`)}>
            <CardMedia
              className={classes.media}
              component='img'
              alt={alias}
              image={`${photo?.data?.attributes?.url ? `${IMAGE_URL}${photo?.data?.attributes?.url}` : noImageUrl}`}
              title={alias}
            />
            <CardContent>
              <Typography gutterBottom align='center' variant='h5' component='h2'>
                {alias}
              </Typography>
              <Typography align='center' variant='body2' color='textSecondary' component='h5'>
                {`${paroles.data.length === 0 ? 'Aucune parole pour le moment' : `${paroles.data.length} ${paroles.data.length > 1 ? 'paroles' : 'parole'}`}`}
              </Typography>
            </CardContent>
          </CardActionArea>
        </Card>
        {esByografiOuve && (
          <AwtisBiyografi
            alias={alias}
            paroles={paroles.data}
            biographie={biographie}
            esByografiOuve={esByografiOuve}
            meteEsByografiOuve={meteEsByografiOuve}
          />
        )}
      </Kat>
    </Grid>
  )
}

AwtisKat.propTypes = {
  artiste: PropTypes.object.isRequired
}