import {
  Alert,
  Box,
  Button,
  Modal,
  Stack,
  styled,
  Typography,
} from '@mui/material'
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: '35px',
}

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

const MessageContainer = styled(Box)(({ theme }) => ({
  maxHeight: '40vh',
  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 const StyledTableContainer = styled(Box)({
  background: 'white',
  borderRadius: '16px',
  marginTop: '10px',
  '& table thead tr': {
    backgroundColor: '#efefef',
  },
  '& table tr th': {
    border: '1px solid #bebebe',
    padding: '2px 8px',
    textAlign: 'center',
  },

  '& table td': {
    border: '1px solid #bebebe',
    padding: '5px 10px',
    fontWeight: 900,
  },

  '& table': {
    width: ' 100%',
    borderCollapse: 'collapse',
  },
})

export const ErrorModalTemplate = ({ handleClose, modal, setModal }) => {
  return (
    <Modal open={modal.open} onClose={handleClose}>
      <Box sx={style}>
        <StyledImage>
          <img src={animatedImage} alt="Error Image" />
        </StyledImage>

        {modal.type == 'String' ? (
          <MessageContainer>
            <Typography
              variant="h6"
              sx={{ textAlign: 'center', lineHeight: 1.7 }}
              dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
            />
          </MessageContainer>
        ) : (
          <>
            <MessageContainer>
              <Alert severity={'error'} sx={{ padding: '10px' }}>
                Please resolve the below mentioned errors to proceed further
              </Alert>
              <StyledTableContainer
                dangerouslySetInnerHTML={{ __html: modal?.errorMessage }}
              />
            </MessageContainer>
          </>
        )}

        {modal.content && modal.content({ close: handleClose })}
        <Button
          variant="outlined"
          onClick={() => setModal({ ...modal, open: false })}
          sx={{ height: '40px', margin: 'auto', width: '200px' }}
        >
          Close
        </Button>
      </Box>
    </Modal>
  )
}
