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 IconButton from '@mui/material/IconButton'
import Typography from '@mui/material/Typography'
import Box from '@mui/material/Box'
import Chip from '@mui/material/Chip'
import CloseIcon from '@mui/icons-material/Close'
import CompareArrowsIcon from '@mui/icons-material/CompareArrows'
import {useTheme} from '@mui/material/styles'
import VersionComparison from './version-comparison.js'

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

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

  const outdated = versionCompare?.outdated || false
  const versionName = versionData?.name || 'Version inconnue'

  return (
    <Dialog
      fullScreen={fullScreen}
      maxWidth='lg'
      open={isOpen}
      aria-labelledby='comparaison-des-versions'
      onClose={handleClose}
    >
      <DialogTitle id='comparaison-des-versions'>
        <Box sx={{display: 'flex', justifyContent: 'space-between', alignItems: 'center'}}>
          <Box sx={{display: 'flex', alignItems: 'center', gap: 2}}>
            <CompareArrowsIcon color='primary' />
            <Typography variant='h6' component='span'>
              Comparaison: {versionName}
            </Typography>
            <Chip
              label={outdated ? 'Obsolète' : 'Active'}
              color={outdated ? 'error' : 'success'}
              size='small'
              variant='outlined'
            />
          </Box>
          <IconButton
            edge='end'
            color='inherit'
            aria-label='fermer'
            onClick={handleClose}
          >
            <CloseIcon />
          </IconButton>
        </Box>
      </DialogTitle>

      <DialogContent sx={{minHeight: '60vh'}}>
        <VersionComparison versionData={versionData} versionCompare={versionCompare} onVoteSuccess={onVoteSuccess} />
      </DialogContent>

      <DialogActions sx={{px: 3, py: 2}}>
        <Button
          variant='contained'
          color='error'
          onClick={handleClose}
        >
          Fermer
        </Button>
      </DialogActions>
    </Dialog>
  )
}

VersionDialog.propTypes = {
  versionData: PropTypes.object,
  versionCompare: 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,
  onVoteSuccess: PropTypes.func
}