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 DialogTitle from '@mui/material/DialogTitle'
import useMediaQuery from '@mui/material/useMediaQuery'
import {useTheme} from '@mui/material/styles'
import VersionComparison from './version-comparison.js'

export default function VersionDialog({versionData, isOpen, setIsOpen}) {
  const theme = useTheme()
  const fullScreen = useMediaQuery(theme.breakpoints.down('md'))

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

  return (
    <Dialog
      fullScreen={fullScreen}
      open={isOpen}
      aria-labelledby='comparaison-des-versions'
      onClose={handleClose}
    >
      <DialogTitle textAlign='center' id='comparaison-des-versions'>
        {'Comparaison des versions'}
      </DialogTitle>
      <DialogContent>
        <VersionComparison versionData={versionData} />
      </DialogContent>
      <DialogActions>
        <Button autoFocus color='success' onClick={handleClose}>
          Fermer
        </Button>
      </DialogActions>
    </Dialog>
  )
}

VersionDialog.propTypes = {
  versionData: PropTypes.shape({
    outdated: PropTypes.bool.isRequired,
    mainHash: PropTypes.string.isRequired,
    current: PropTypes.object.isRequired,
    main: PropTypes.object.isRequired
  }).isRequired,
  isOpen: PropTypes.bool.isRequired,
  setIsOpen: PropTypes.func.isRequired
}