import {useState} from 'react'
import PropTypes from 'prop-types'
import clsx from 'clsx'

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

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

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

const PREFIX = 'awtis-kat'

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

const Root = styled('div')((
  {
    theme
  }
) => ({
  [`& .${classes.root}`]: {
    maxWidth: 345
  },

  [`& .${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 [esByografiOuve, meteEsByografiOuve] = useState(false)
  const noImageUrl = 'https://place-hold.it/140x140?text=Pa%20ni%20imaj'

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

  const [expanded, setExpanded] = useState(false)

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

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

  return (
    (
      <Root>
        <Grid item xs={12} sm={6} lg={4}>
          <Card className={classes.root}>
            <CardActionArea onClick={handleClick}>
              <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'
                onClick={handleExpandClick}
              >
                <ExpandMoreIcon />
              </IconButton>
            </CardActions>
            <Collapse unmountOnExit in={expanded} timeout='auto'>
              <CardContent>
                <MizikLis teks={teks} />
              </CardContent>
            </Collapse>
          </Card>
        </Grid>
        {esByografiOuve && (
          <AwtisBiyografi
            alias={alias}
            teks={teks}
            biyografi={biyografi}
            esByografiOuve={esByografiOuve}
            meteEsByografiOuve={meteEsByografiOuve}
          />
        )}
      </Root>
    )
  )
}

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