import styled from 'styled-components';
import { CssScrollbar } from '../../theme';
import { Button } from '../button/button';
import { Container } from '../container/container';
import { Flex } from '../flex/flex';
import { Section } from '../section/section';
import { Text } from '../text/text';

const StyledText = styled(Text)`
  margin-bottom: 1em;
  width: 100%;
  max-height: 60vh;
  padding: 2em;
  border-radius: 6px;
  background: #202020;
  border: 1px solid #303030;
  white-space: pre;
  overflow-x: hidden;
  overflow-y: auto;
  ${CssScrollbar}
`;

export function ErrorHandler({ error, resetErrorBoundary }: { error: any, resetErrorBoundary?: () => void }) {
  console.log('ErrorHandler.error', error);
  return (
    <Section minHeight="100vh" background="#101010" color="#eeeeee">
      <Container>
        <Flex.Col gap="1rem" alignItems="flex-start">
          <Text variant="heading20" color="var(--color-danger-500)">Unhandled Runtime Error</Text>
          <Text variant="display40">{error.message}</Text>
          {error.stack && (
            <StyledText variant="paragraph30">{error.stack}</StyledText>
          )}
          {typeof resetErrorBoundary === 'function' && (
            <Button variant="secondary" onClick={resetErrorBoundary}>Try again?</Button>
          )}
        </Flex.Col>
      </Container>
    </Section>
  );
}