import { Component, ReactNode } from 'react';
import { ErrorView } from './ErrorView';

interface Props {
  children?: ReactNode;
}

interface State {
  hasError: boolean;
}

class ErrorBoundary extends Component<Props, State> {
  constructor(props: Props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(): State {
    // Update state so the next render will show the fallback UI.
    return { hasError: true };
  }

  componentDidCatch(error: Error): void {
    (window as any).track('error', {
      errorSource: 'client',
      errorCode: 'crashClient',
      errorMessage: error?.toString(),
      apiCall: 'unknown',
      apiPayload: 'unknown',
    });
  }

  render(): ReactNode {
    if (this.state.hasError) {
      return (
        <ErrorView
          statusCode={404000}
          description={'Có lỗi xảy ra, vui lòng thử lại sau'}
        />
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;