import { CloseIcon } from '@chakra-ui/icons'
import { Box, BoxProps, Flex } from '@chakra-ui/react'
import { keyframes } from '@chakra-ui/system'
import React, { ReactNode, useEffect } from 'react'

interface ICustomModalProps extends BoxProps {
  isOpen: boolean
  onClose: () => void
  header?: string
  closeOnOverlayClick?: boolean
  animationOverlay?: ReactNode
}

const zoomIn = keyframes`
 from {
  transform: translate(-50%, -50%) scale(0.90)
  }
  to {
    transform: translate(-50%, -50%) scale(1)
  }
`

const CustomModal: React.FunctionComponent<ICustomModalProps> = (props) => {
  const { isOpen, onClose, header, children, closeOnOverlayClick = true, animationOverlay, ...modalProps } = props

  useEffect(() => {
    if (isOpen) {
      document.body.classList.add('hiddenScroll')
    }
    return () => {
      document.body.classList.remove('hiddenScroll')
    }
  }, [isOpen])

  if (isOpen === false) {
    return null
  }

  return (
    <Box position={'fixed'} width={'100%'} height={'100vh'} zIndex={'999'} top={'0'} left={'0'}>
      <Box
        zIndex={'1'}
        onClick={closeOnOverlayClick ? onClose : () => {}}
        css={{
          '> div': {
            cursor: 'default',
          },
        }}
        position={'absolute'}
        width={'100%'}
        height={'100vh'}
        top={'0'}
        left={'0'}
        bgColor={'blackAlpha.600'}
      >
        {animationOverlay}
      </Box>

      <Box
        animation={`${zoomIn} 0.15s 1 both`}
        top={'50%'}
        left={'50%'}
        transform={'translate(-50%, -50%) scale(0.90)'}
        position={'absolute'}
        zIndex={'2'}
        // maxW={'464px'}
        w={{ base: '100%', md: 'auto' }}
        maxH={'100vh'}
        overflowY={'auto'}
        bg="#050F38"
        borderRadius="16px"
        {...modalProps}
      >
        <Flex w={'full'} justify={'space-between'} align={'center'}>
          <Box
            fontFamily={'default'}
            fontWeight="600"
            fontSize={{ base: '24px', md: '32px' }}
            lineHeight="32px"
            px={{ base: '24px', md: '48px' }}
            py="22px"
          >
            {header}
          </Box>
          <CloseIcon
            onClick={onClose}
            w="40px"
            h="40px"
            cursor={'pointer'}
            p={'10px'}
            mr={'20px'}
            color="white"
            borderRadius="full"
            bg="#121935"
            _hover={{
              filter: 'brightness(1.5)',
            }}
          />
        </Flex>
        <Box
          color="#808191"
          fontFamily="default"
          fontSize="12px"
          lineHeight="16px"
          mb="16px"
          px={{ base: '24px', md: '48px' }}
          py={'18px'}
        >
          {children}
        </Box>
      </Box>
    </Box>
  )
}

export default CustomModal