import React, { Component, ErrorInfo, ReactNode } from 'react';
import { Heading, Text, Button, Center, VStack } from '@chakra-ui/react';
import i18next from 'i18next';

interface ErrorBoundaryState {
  hasError: boolean;
  error: Error | null;
  errorInfo: ErrorInfo | null;
}

interface ErrorBoundaryProps {
  children: ReactNode;
}

class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
  constructor(props: ErrorBoundaryProps) {
    super(props);
    this.state = {
      hasError: false,
      error: null,
      errorInfo: null,
    };
  }

  static getDerivedStateFromError(): Partial<ErrorBoundaryState> {
    return { hasError: true };
  }

  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
    console.error('Error caught by ErrorBoundary:', error, errorInfo);
    console.error('4545');
    this.setState({ error, errorInfo });
  }

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

    if (hasError) {
      return (
        <Center minH='100vh' data-testid='error-boundary'>
          <VStack spacing={4} textAlign='center'>
            <Heading as='h1' size='2xl' data-testid='error-title'>
              {i18next.t('~:dry-wash.errorBoundary.title')}
            </Heading>
            <Text fontSize='lg' data-testid='error-description'>
              {i18next.t('~:dry-wash.errorBoundary.description')}
            </Text>
            <Button
              colorScheme='teal'
              size='lg'
              variant='outline'
              data-testid='error-reload-button'
              onClick={() => window.location.reload()}
            >
              {i18next.t('~:dry-wash.errorBoundary.button.reload')}
            </Button>
          </VStack>
        </Center>
      );
    }

    return this.props.children;
  }
}

export default ErrorBoundary;