import {useState} from 'react'
import PropTypes from 'prop-types'
import Image from 'next/image'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import DialogTitle from '@mui/material/DialogTitle'
import Divider from '@mui/material/Divider'
import Link from '@mui/material/Link'
import useMediaQuery from '@mui/material/useMediaQuery'
import {useTheme} from '@mui/material/styles'
import LicensesInfo from './licenses-infos'

export default function LicenseModal({license, sourceOriginale, remixes}) {
  const [open, setOpen] = useState(false)
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))

  const handleClickOpen = () => {
    setOpen(true)
  }

  const handleClose = () => {
    setOpen(false)
  }

  return (
    <>
      <Button sx={{border: '1px solid grey', marginBottom: 2}} onClick={handleClickOpen}>
        <Image
          width={120}
          height={42}
          alt={license}
          src={`/images/cc/${license}.svg`}
        />
      </Button>
      <Dialog
        fullScreen={fullScreen}
        open={open}
        aria-labelledby='responsive-dialog-title'
        onClose={handleClose}
      >
        <DialogTitle textAlign='center' id='responsive-dialog-title'>
          <Box sx={{display: 'flex', alignItems: 'center', justifyContent: 'center'}}>
            <Image
              width={46}
              height={46}
              alt={license}
              src='/images/cc/icons/cc.svg'
            />
            <Typography marginLeft={1} fontWeight='bold' variant='h4'>Creative Commons</Typography>
          </Box>
        </DialogTitle>
        <DialogContent dividers>
          {sourceOriginale && (
            <Box sx={{mb: 3}}>
              <Typography gutterBottom variant='overline' color='text.secondary' display='block'>
                Basé sur
              </Typography>
              <Link href={`/paroles/${sourceOriginale.slug}`} underline='hover' color='inherit'>
                <Typography variant='h6' fontWeight='bold'>{sourceOriginale.titre}</Typography>
              </Link>
              {sourceOriginale.artistes?.length > 0 && (
                <Typography variant='body1' color='text.secondary'>
                  {sourceOriginale.artistes.map(a => a.alias).join(', ')}
                </Typography>
              )}
              {sourceOriginale.annee && (
                <Typography variant='body2' color='text.secondary'>{sourceOriginale.annee}</Typography>
              )}
              <Divider sx={{mt: 2}} />
            </Box>
          )}
          {remixes && (
            <Box sx={{mb: 3}}>
              <Typography gutterBottom variant='overline' color='text.secondary' display='block'>
                Déclinaisons
              </Typography>
              {remixes.map(remix => (
                <Box key={remix.slug} sx={{mb: 1.5}}>
                  <Link href={`/paroles/${remix.slug}`} underline='hover' color='inherit'>
                    <Typography variant='h6' fontWeight='bold'>{remix.titre}</Typography>
                  </Link>
                  {remix.artistes?.length > 0 && (
                    <Typography variant='body1' color='text.secondary'>
                      {remix.artistes.map(a => a.alias).join(', ')}
                    </Typography>
                  )}
                  {remix.annee && (
                    <Typography variant='body2' color='text.secondary'>{remix.annee}</Typography>
                  )}
                </Box>
              ))}
              <Divider sx={{mt: 2}} />
            </Box>
          )}
          <LicensesInfo license={license} />
        </DialogContent>
        <DialogActions>
          <Button autoFocus onClick={handleClose}>
            Fermer
          </Button>
        </DialogActions>
      </Dialog>
    </>
  )
}

LicenseModal.propTypes = {
  license: PropTypes.string.isRequired,
  sourceOriginale: PropTypes.object,
  remixes: PropTypes.array
}
