'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/Grid'
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 Chip from '@mui/material/Chip'

import {styled} from '@mui/material/styles'
import VerifiedIcon from '@mui/icons-material/Verified'

import {formatKuveti} from '../../lib/kuveti'
import AwtisBiyografi from './awtis-biyografi'

const PREFIX = 'awtis-kat'
const IMAGE_URL = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'
const EXCLUSIVE_LABEL = process.env.NEXT_PUBLIC_EXCLUSIVE_ARTIST_LABEL || 'OKI Exclusif'

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, isExclusiveArtist} = artiste

  return (
    <Grid size={{xs: 12, sm: 6, md: 4}}>
      <Kat>
        <Card sx={{maxWidth: 340, position: 'relative', ...(isExclusiveArtist && {outline: '2px solid #FFD700'})}}>
          {isExclusiveArtist && (
            <Chip
              icon={<VerifiedIcon sx={{fontSize: 14}} />}
              label={EXCLUSIVE_LABEL}
              size='small'
              sx={{
                position: 'absolute', top: 8, left: 8, zIndex: 1,
                bgcolor: '#FFD700', color: '#000',
                fontWeight: 700, fontSize: '0.7rem',
                '& .MuiChip-icon': {color: '#000'},
              }}
            />
          )}
          <CardActionArea onClick={() => router.push(`/awtis/${slug}`)}>
            <CardMedia
              className={classes.media}
              component='img'
              alt={alias}
              image={`${photo?.url ? `${IMAGE_URL}${formatKuveti(photo, 'thumbnail')?.url}` : noImageUrl}`}
              loading='lazy'
              title={alias}
            />
            <CardContent>
              <Typography gutterBottom align='center' variant='h5' component='h2'>
                {alias}
              </Typography>
              <Typography align='center' variant='body2' color='textSecondary' component='h5'>
                {`${paroles.length === 0 ? 'Aucune parole pour le moment' : `${paroles.length} ${paroles.length > 1 ? 'paroles' : 'parole'}`}`}
              </Typography>
            </CardContent>
          </CardActionArea>
        </Card>
        {esByografiOuve && (
          <AwtisBiyografi
            alias={alias}
            paroles={paroles}
            biographie={biographie}
            esByografiOuve={esByografiOuve}
            meteEsByografiOuve={meteEsByografiOuve}
          />
        )}
      </Kat>
    </Grid>
  )
}

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