import * as React from "react";

import { coreLogger } from "@applicaster/zapp-react-native-utils/logger";
import { ErrorScreen } from "@applicaster/zapp-react-native-ui-components/Components/ErrorScreen";

const errorBoundaryLogger = coreLogger.addSubsystem("react_error-boundary");

type Props = {
  children: React.ReactNode;
};

type State = {
  hasError: boolean;
  error?: Error;
  info?: string;
};

export class ErrorBoundary extends React.Component<Props, State> {
  state: State = {
    hasError: false,
    error: undefined,
  };

  componentDidCatch(error, info) {
    errorBoundaryLogger.error({ error, data: info, message: error.message });
    this.setState({ hasError: true, error, info });
  }

  dismissError = () => {
    this.setState({ hasError: false });
  };

  render() {
    const { hasError } = this.state as State;

    if (hasError) {
      return <ErrorScreen dismissError={this.dismissError} />;
    }

    return this.props.children;
  }
}