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 useMediaQuery from '@mui/material/useMediaQuery'
import {useTheme} from '@mui/material/styles'
import LicensesInfo from './licenses-infos'

export default function LicenseModal({license}) {
  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>
          <LicensesInfo license={license} />
        </DialogContent>
        <DialogActions>
          <Button autoFocus onClick={handleClose}>
            Fermer
          </Button>
        </DialogActions>
      </Dialog>
    </>
  )
}

LicenseModal.propTypes = {
  license: PropTypes.string.isRequired
}