import { Box, Button, Dialog, styled, Typography } from '@mui/material'
import useConfirm from './useConfirm'
const animatedImage = require('./animation.gif')

const StyledImage = styled((props: any) => (
  <Box>
    <img {...props} />
  </Box>
))(({ theme }) => ({
  width: '154px',
  '> img': {
    width: '100%',
    height: '100%',
    objectFit: 'contain',
  },
}))

const StyledDialogContent = styled(Box)(({ theme }) => ({
  height: '360px',
  width: '570px',
  display: 'flex',
  alignItems: 'center',
  justifyContent: 'center',
  flexDirection: 'column',
  margin: 'auto',
}))

const PopupConfirm = () => {
  const { prompt = '', isOpen = false, proceed, cancel } = useConfirm()
  return (
    <Dialog
      PaperProps={{
        elevation: 2,
        sx: {
          borderRadius: '10px',
        },
      }}
      sx={{
        '& .MuiBackdrop-root': { backgroundColor: 'rgba(0, 0, 0, 0.4)' },
        zIndex: 1600,
      }}
      keepMounted
      maxWidth="sm"
      fullWidth
      open={isOpen}
      transitionDuration={150}
    >
      <StyledDialogContent>
        <Box sx={{ marginBottom: '20px' }}>
          <StyledImage src={animatedImage} alt="Upload Image" />
        </Box>

        <Typography
          variant="h6"
          sx={{ minHeight: '30px', textAlign: 'center' }}
        >
          {prompt}
        </Typography>
        <Box sx={{ display: 'flex', gap: '20px', marginTop: '30px' }}>
          <Button color="secondary" variant="outlined" onClick={cancel}>
            No, Cancel
          </Button>
          <Button variant="outlined" onClick={proceed} sx={{ height: '40px' }}>
            Yes, I'm. Sure
          </Button>
        </Box>
      </StyledDialogContent>
    </Dialog>
  )
}
export default PopupConfirm
