import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
import { Space, Typography, Button } from 'antd';
import { useState, useMemo } from 'react';
import styled from 'styled-components';
import { Alert } from '../../atoms/Alert';
import { generateAnsiHTML } from './utils';
const { Text, Paragraph } = Typography;
export const Code = styled.pre `
  padding: 0.4em 0.8em;
  font-size: 13px;
  white-space: pre-wrap;
  margin: 0;
  max-width: 100%;
  overflow: auto;
`;
export function FatalError({ error, stack }) {
    const [visible, setVisible] = useState(false);
    const ansiHtmlError = useMemo(() => {
        return generateAnsiHTML(error.toString()).replace(/(Error:\s)/g, '');
    }, [error]);
    const errorStack = stack || (typeof error !== 'string' ? error.response?.stack : null);
    return (_jsxs(Space, { direction: "vertical", children: [_jsx(Text, { strong: true, style: { fontSize: 18 }, children: "Error \uD83D\uDE22" }), _jsxs(Paragraph, { children: ["Ask about it in", ' ', _jsx("a", { href: "https://slack.cube.dev", target: "_blank", rel: "noopener noreferrer", children: "Slack" }), ". These guys know how to fix this for sure!"] }), _jsx(Alert, { type: "error", message: _jsxs(Space, { direction: "vertical", children: [_jsx(Code, { dangerouslySetInnerHTML: {
                                __html: ansiHtmlError,
                            } }), errorStack ? (_jsxs(_Fragment, { children: [!visible ? (_jsx(Button, { danger: true, ghost: true, size: "small", onClick: () => setVisible(true), children: "Show stack trace" })) : null, visible && _jsx("pre", { children: errorStack })] })) : null] }) })] }));
}
//# sourceMappingURL=FatalError.js.map