import { CopyIcon } from '@chakra-ui/icons'
import { Box, Button, Flex, IconButton, Text } from '@chakra-ui/react'
import Image from 'next/image'
import { useCallback } from 'react'
import { copyText } from '../CopyItem'
import * as Sentry from '@sentry/react'
import { Logo } from '../../../constants/icons'

export default function ErrorBoundary({ children }) {
  const handleOnClick = useCallback(() => window.location.reload(), [])
  return (
    <Sentry.ErrorBoundary
      beforeCapture={(scope) => {
        scope.setLevel('fatal')
      }}
      fallback={({ eventId }) => {
        return (
          <Box minH={'calc(100vh - 64px)'} py={'16px'}>
            <Flex flexDirection="column" justifyContent="center" alignItems="center">
              <Image width="64px" src={Logo} alt="logo" />
              <Text mb="16px">Oops, something wrong.</Text>
              {eventId && (
                <Flex flexDirection="column" style={{ textAlign: 'center' }} mb="8px">
                  <Text>Error Tracking Id</Text>
                  <Flex alignItems="center">
                    <Text>{eventId}</Text>
                    <IconButton aria-label="text" onClick={() => copyText(eventId)}>
                      <CopyIcon color="primary" width="24px" />
                    </IconButton>
                  </Flex>
                </Flex>
              )}
              <Button onClick={handleOnClick}>Click here to reset!</Button>
            </Flex>
          </Box>
        )
      }}
    >
      {children}
    </Sentry.ErrorBoundary>
  )
}