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

import {
  CardActionArea,
  Grid,
  Card,
  CardContent,
  CardMedia,
  CardActions,
  Collapse,
  IconButton,
  Typography
} from '@mui/material'

import ExpandMoreIcon from '@mui/icons-material/ExpandMore'
import {styled} from '@mui/material/styles'

import MizikLis from './mizik-lis'
import AwtisBiyografi from './awtis-biyografi'

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

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)'
  }
}))

export default function AwtisKat({anAwtis}) {
  const router = useRouter()
  const [esByografiOuve, meteEsByografiOuve] = useState(false)
  const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'

  const {alias, biyografi, teks, foto, slug} = anAwtis

  const [expanded, setExpanded] = useState(false)

  const handleExpandClick = () => {
    setExpanded(!expanded)
  }

  return (
    <Grid item 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={`${foto.length > 0 ? `${process.env.NEXT_PUBLIC_API_URL}${foto[0].url}` : noImageUrl}`}
              title={alias}
            />
            <CardContent>
              <Typography gutterBottom align='center' variant='h5' component='h2'>
                {alias}
              </Typography>
              <Typography align='center' variant='body2' color='textSecondary' component='h5'>
                {anAwtis.teks.length} tèks
              </Typography>
            </CardContent>
          </CardActionArea>

          <CardActions disableSpacing>
            <IconButton
              className={clsx(classes.expand, {
                [classes.expandOpen]: expanded
              })}
              aria-expanded={expanded}
              aria-label='show more'
              size='large'
              onClick={handleExpandClick}
            >
              <ExpandMoreIcon />
            </IconButton>
          </CardActions>
          <Collapse unmountOnExit in={expanded} timeout='auto'>
            <CardContent>
              <MizikLis teks={teks} />
            </CardContent>
          </Collapse>
        </Card>
        {esByografiOuve && (
          <AwtisBiyografi
            alias={alias}
            teks={teks}
            biyografi={biyografi}
            esByografiOuve={esByografiOuve}
            meteEsByografiOuve={meteEsByografiOuve}
          />
        )}
      </Kat>
    </Grid>
  )
}

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