import {useState} from 'react'
import PropTypes from 'prop-types'
import Button from '@mui/material/Button'
import Dialog from '@mui/material/Dialog'
import DialogActions from '@mui/material/DialogActions'
import DialogContent from '@mui/material/DialogContent'
import useMediaQuery from '@mui/material/useMediaQuery'
import {useTheme} from '@mui/material/styles'

import DownloadForOfflineIcon from '@mui/icons-material/DownloadForOffline'
import FilesList from './files-list'

export default function FilesDialog({files}) {
  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 endIcon={<DownloadForOfflineIcon />} sx={{marginBottom: 2}} variant='outlined' onClick={handleClickOpen}>
        Télécharger
      </Button>
      <Dialog
        fullScreen={fullScreen}
        open={open}
        aria-labelledby='FilesDialog'
        onClose={handleClose}
      >
        <DialogContent dividers>
          <FilesList files={files} />
        </DialogContent>
        <DialogActions>
          <Button autoFocus onClick={handleClose}>
            Fermer
          </Button>
        </DialogActions>
      </Dialog>
    </>
  )
}

FilesDialog.propTypes = {
  files: PropTypes.array.isRequired
}