import React, { ErrorInfo, PureComponent } from 'react';
import hoistNonReactStatic from 'hoist-non-react-statics';
// import * as Updates from 'expo-updates';
import { Native as Sentry } from 'sentry-expo';
// import { SBox } from '../s-components/layout/s-box';
// import { SText } from '../s-components/typography/s-text';
// import { Button } from '../components/button';
import { SENTRY_BREADCRUMB } from '../utils/debuggers/sentry-logger';

export const withErrorBoundary = (name: string) => (
  WrappedComponent: any
): any => {
  class WithErrorBoundary extends PureComponent {
    // static getDerivedStateFromError() {
    //   return { error: true };
    // }
    //
    // state = {
    //   error: false,
    // };

    componentDidMount() {
      SENTRY_BREADCRUMB.componentDidMount(name);
    }

    componentDidCatch(error: Error, errorInfo: ErrorInfo) {
      // const name = getDisplayName(WrappedComponent);

      Sentry.withScope(scope => {
        scope.setExtras((errorInfo as unknown) as Record<string, unknown>);

        SENTRY_BREADCRUMB.componentDidCatch(name);

        scope.setTag('errorInComponent', name);
        // const eventId = Sentry.captureException(error);
        Sentry.captureException(error);
      });
    }

    componentWillUnmount() {
      SENTRY_BREADCRUMB.componentWillUnmount(name);
    }

    render() {
      const { ...passThroughProps } = this.props;
      // const { error } = this.state;

      // if (error) {
      //   return (
      //     <SBox flex={1} alignItems="center" justifyContent="center">
      //       <SText mb={16}>Ooops! Something happened</SText>
      //       <Button
      //         onPress={async () => {
      //           try {
      //             await Updates.reloadAsync();
      //           } catch (e) {
      //             // @ts-ignore
      //             throw new Error(e.message);
      //           }
      //         }}
      //       >
      //         Reload App
      //       </Button>
      //     </SBox>
      //   );
      // }

      return <WrappedComponent {...passThroughProps} />;
    }
  }

  hoistNonReactStatic(WithErrorBoundary, WrappedComponent);

  // @ts-ignore
  WithErrorBoundary.displayName = `WithErrorBoundary(${getDisplayName(
    WrappedComponent
  )})`;
  return WithErrorBoundary;
};

function getDisplayName(WrappedComponent: any) {
  return WrappedComponent.displayName || WrappedComponent.name || 'Component';
}