import {useState, useEffect, forwardRef} from 'react'
import {useRouter} from 'next/router'
import PropTypes from 'prop-types'

import Container from '@mui/material/Container'
import Grid from '@mui/material/Grid'
import Skeleton from '@mui/material/Skeleton'
import Card from '@mui/material/Card'
import CardActionArea from '@mui/material/CardActionArea'
import CardContent from '@mui/material/CardContent'
import Typography from '@mui/material/Typography'
import MuiAlert from '@mui/material/Alert'
import Snackbar from '@mui/material/Snackbar'

import ExplicitIcon from '@mui/icons-material/Explicit'

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

import {format} from 'date-fns'
import {fr} from 'date-fns/locale'

import Image from 'next/image'
import {useMediaQuery} from '@mui/material'
import {jwennDenyeTeks} from '../../lib/oki-api'

const PREFIX = 'denye-teks'
const TEKS_PREFIX = 'teks-kat'
const KAT_ARRAY = Array.from({length: 6})

const classes = {
  container: `${PREFIX}-container`
}

const teksClasses = {
  root: `${TEKS_PREFIX}-root`,
  media: `${TEKS_PREFIX}-media`
}

const Root = styled('div')(() => ({
  [`&.${classes.container}`]: {
    marginTop: '1em',
    marginBottom: '2em'
  }
}))

const StyledGrid = styled(Grid)({
  [`& .${teksClasses.root}`]: {
    maxWidth: 345
  },
  [`& .${teksClasses.media}`]: {
    height: 240,
    objectFit: 'contain'
  }
})

const Alert = forwardRef(function Alert(props, ref) {
  return <MuiAlert ref={ref} elevation={6} variant='filled' {...props} />
})

export default function DenyeTeks({error, setError}) {
  const router = useRouter()
  const [teks, setTeks] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const isMobile = useMediaQuery('(max-width:527px)')
  const [isOpen, setIsOpen] = useState(false)

  const handleClick = slug => {
    router.push(`/paroles/${slug}#${slug}`).then(() => window.scrollTo(0, 0))
  }

  const noImageUrl = 'https://place-hold.it/140x140?text=Image%20indisponible'
  const formatDate = date => format(new Date(date), 'P', {locale: fr})

  useEffect(() => {
    const getTeks = async () => {
      try {
        const denyeTeks = await jwennDenyeTeks()
        setTeks(denyeTeks)
      } catch (error_) {
        setIsOpen(true)
        setError(error_)
        setIsLoading(false)
      }
    }

    getTeks()

    setIsLoading(false)
  }, [setError])

  const handleClose = (event, reason) => {
    if (reason === 'clickaway') {
      return
    }

    setIsOpen(false)
  }

  return (
    <Root className={classes.container}>
      <Container>
        <Grid container spacing={3}>
          {error && (
            <Snackbar open={isOpen} autoHideDuration={3000} onClose={handleClose}>
              <Alert severity='error' onClose={handleClose}>
                <strong>Les éléments ne peuvent pas s’afficher</strong> : <i>{error.message}</i>
              </Alert>
            </Snackbar>
          )}
          {!error && KAT_ARRAY.map((kat, index) => (
            <StyledGrid key={index} item xs={12} sm={6} md={4}> {/* eslint-disable-line react/no-array-index-key */}
              <Card className={classes.root}>
                {isLoading || teks.length === 0 ? (
                  <CardContent>
                    <Skeleton variant='rectangular' width='100%' height={isMobile ? 250 : 352} />
                    <Skeleton />
                    <Skeleton width='30%' />
                    <Skeleton width='10%' />
                    <Skeleton width='30%' />
                  </CardContent>
                ) : (
                  <CardActionArea onClick={() => handleClick(teks[index].slug)}>
                    <Image
                      src={teks[index].kouveti ? `${process.env.NEXT_PUBLIC_API_URL}${teks[index].kouveti.url}` : noImageUrl}
                      alt={teks[index].tit}
                      width={500}
                      height={500}
                      placeholder='blur'
                      blurDataURL='data:image/png;base64,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'
                    />
                    <CardContent>
                      <Typography display='inline' style={{marginRight: 5}} variant='h6' component='h2'>
                        {teks[index].tit}
                      </Typography>
                      {teks[index].eksplisit && (
                        <ExplicitIcon style={{marginRight: 5}} color='secondary' fontSize='small' />
                      )}
                      <Typography variant='caption'>
                        {teks[index].user && (
                          <>
                            (<i>texte soumis par {teks[index].user.username}</i>)
                          </>
                        )}
                        {teks[index].userAdmin && !teks[index].user && (
                          <>
                            (<i>texte soumis par {teks[index].userAdmin}</i>)
                          </>
                        )}
                      </Typography>
                      <Typography variant='body2' color='textSecondary' component='p'>
                        {new Intl.ListFormat('fr').format(teks[index].awtis.map(({alias}) => alias))}
                      </Typography>
                      <Typography variant='body2' color='textSecondary' component='p'>
                        {teks[index].lanne}
                      </Typography>
                      <Typography align='center' style={{marginTop: '0.5em'}} variant='body1' color='textSecondary' component='p'>
                        Publié le : {formatDate(teks[index].published_at)}
                      </Typography>
                    </CardContent>
                  </CardActionArea>
                )}
              </Card>
            </StyledGrid>
          ))}
        </Grid>
      </Container>
    </Root>
  )
}

DenyeTeks.defaultProps = {
  error: null
}

DenyeTeks.propTypes = {
  error: PropTypes.object,
  setError: PropTypes.func.isRequired
}