import PropTypes from 'prop-types'
import Link from 'next/link'
import Image from 'next/image'
import ListItemButton from '@mui/material/ListItemButton'
import Box from '@mui/material/Box'
import ListItemText from '@mui/material/ListItemText'
import Typography from '@mui/material/Typography'
import ListItemAvatar from '@mui/material/ListItemAvatar'
import Avatar from '@mui/material/Avatar'
import FiberNewOutlinedIcon from '@mui/icons-material/FiberNewOutlined'
import LibraryMusicIcon from '@mui/icons-material/LibraryMusic'
import ExplicitIcon from '@mui/icons-material/Explicit'

import {esBrandNew} from '../../lib/date'
import {getAlias} from '../../lib/utils/format'

const apiUrl = process.env.NEXT_PUBLIC_API_URL_ROOT || 'http://localhost:1337'

export default function MizikLyen({niAwtis, anPawol, kuveti, slug, meteEsMobilOuve}) {
  return (
    <Link
      passHref
      href={`/paroles/${anPawol.slug}#${anPawol.slug}`}
      style={{textDecoration: 'none', width: '100%', display: 'flex', alignItems: 'center'}}
      onClick={() => meteEsMobilOuve(false)}
    >
      <ListItemButton
        sx={{padding: 0}}
        id={anPawol.slug}
        selected={slug === anPawol.slug}
      >
        <ListItemAvatar sx={{ml: 2.5}}>
          <Avatar alt={anPawol.titre} src={`${apiUrl}${kuveti?.url}`} />
        </ListItemAvatar>
        <ListItemText
          primary={<Typography sx={{fontWeight: 'bold', color: 'info.main'}} >{anPawol.titre}</Typography>}
          secondary={niAwtis ? getAlias(anPawol.artistes, anPawol.prioriteArtistes) : null} />

        {anPawol.creativeCommons && (
          <Box marginInline={1}>
            <Image
              width={24}
              height={24}
              title='Creative Commons'
              alt='ccheart_red'
              src='/images/cc/icons/ccheart_red.svg'
            />
          </Box>
        )}

        {esBrandNew(anPawol.createdAt) && (
          <FiberNewOutlinedIcon style={{fontSize: 30, marginRight: 5}} color='primary' />
        )}

        {anPawol.explicitLyrics && (
          <ExplicitIcon style={{marginRight: 5}} color='error' />
        )}
        {anPawol.okiMizikID && (
          <LibraryMusicIcon style={{fontSize: 30, marginRight: 5}} color='primary' />
        )}
      </ListItemButton>
    </Link>
  )
}

MizikLyen.propTypes = {
  niAwtis: PropTypes.bool,
  anPawol: PropTypes.object,
  kuveti: PropTypes.object,
  slug: PropTypes.string,
  meteEsMobilOuve: PropTypes.func.isRequired
}