import * as React from "react"
import {ReactError} from "./ReactError"
import {ErrorDisplay} from "./ErrorDisplay"

export type State = {error: ReactError | null}
export type Props = {
  name?: string
  onErrorElement?: React.ReactElement<any>
  onErrorPrefixElement?: React.ReactElement<any>
}

export class ErrorBoundary extends React.Component<Props, State> {
  state: State = {error: null}

  componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
    console.error(error)
    console.error(errorInfo)
    this.setState({
      error: {error, errorInfo},
    })
  }

  render() {
    if (this.state.error != null) {
      if (this.props.onErrorElement != null) {
        return React.createElement(
          React.Fragment,
          {},
          this.props.onErrorPrefixElement,
          this.props.onErrorElement,
        )
      } else {
        return React.createElement(ErrorDisplay, {
          onErrorPrefixElement: this.props.onErrorPrefixElement,
          name,
          error: this.state.error,
        })
      }
    } else {
      return this.props.children
    }
  }
}