import { Box, Button, Modal, Typography, styled } from '@mui/material'
import { useEffect, useState } from 'react'
import { animatedImage } from '../assets/images'

const style = {
  position: 'absolute' as 'absolute',
  top: '50%',
  left: '50%',
  transform: 'translate(-50%, -50%)',
  bgcolor: 'background.paper',
  boxShadow: 24,
  width: '700px',
  borderRadius: '10px',
  display: 'flex',
  gap: '15px',
  flexDirection: 'column',
  padding: '20px',
}

const StyledImage = styled(Box)(({ theme }) => ({
  width: '154px',
  margin: 'auto',
  '> img': {
    width: '100%',
    height: '120px',
    objectFit: 'contain',
  },
}))

const MessageContainer = styled(Box)(({ theme }) => ({
  maxHeight: '60vh',
  padding: '15px',
  overflowY: 'auto',
  '&::-webkit-scrollbar': {
    width: '0.5em',
    height: '0.5em',
  },
  '&::-webkit-scrollbar-thumb': {
    backgroundColor: 'rgba(0, 0, 0, 0.15)',
    borderRadius: '3px',
    '&:hover': {
      background: 'rgba(0, 0, 0, 0.2)',
    },
  },
}))

export default function ErrorModal({
  errorMessage,
  ...props
}: {
  errorMessage: string
}) {
  const [open, setOpen] = useState(false)

  const handleClose = () => {
    setOpen((prev) => !prev)
  }

  useEffect(() => {
    setOpen(true)
  }, [])

  return (
    <Modal open={open} onClose={handleClose}>
      <Box sx={style}>
        <StyledImage>
          <img src={animatedImage} alt="Error Image" />
        </StyledImage>

        <MessageContainer>
          <Typography
            variant="h6"
            sx={{ textAlign: 'center', lineHeight: 1.7 }}
          >
            {errorMessage}
          </Typography>
        </MessageContainer>
        <Button
          variant="outlined"
          onClick={handleClose}
          sx={{ height: '40px', margin: 'auto', width: '200px' }}
        >
          OK
        </Button>
      </Box>
    </Modal>
  )
}
