import React, { useContext } from 'react'
import { ErrorBoundary } from 'react-error-boundary'
import { trackException } from '../utils/Analytics'
import { AiFillBug } from 'react-icons/ai'
import { WiRefresh } from 'react-icons/wi'
import { APP } from '../Constants'
import '../pages/Page.css'

export default function AppErrorBoundary({ children }) {
  function ErrorFallback({ error, resetErrorBoundary }) {
    return (
      <div className="Page appError">
        <AiFillBug size={64} />
        <p>Sorry there was a problem loading this page.</p>
        <p>{error}</p>
        <button onClick={resetErrorBoundary}>
          <WiRefresh size={32} className={'buttonIcon'} /> Try again
        </button>
      </div>
    )
  }

  const errorHandler = (error, info) => {
    trackException(error, true)
  }

  return (
    <ErrorBoundary FallbackComponent={ErrorFallback} onError={errorHandler}>
      {children}
    </ErrorBoundary>
  )
}