import React, { Suspense } from "react";
import { LoadingTip, ErrorTip } from "@tencent/tea-component";

const DiffEditor = React.lazy(() => import("./DiffEditor"));

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true };
  }

  componentDidCatch(error, errorInfo) {}

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

    if (hasError) {
      // 处理 IE11 等场景
      return (
        <ErrorTip
          style={{
            display: "block",
            height: 400,
            padding: 80,
            textAlign: "center",
          }}
        />
      );
    }

    return children;
  }
}

export default function Demo() {
  return (
    <div style={{ border: "1px solid #ddd" }}>
      <ErrorBoundary>
        <Suspense
          fallback={
            <LoadingTip
              style={{
                display: "block",
                height: 400,
                padding: 80,
                textAlign: "center",
              }}
            />
          }
        >
          <DiffEditor />
        </Suspense>
      </ErrorBoundary>
    </div>
  );
}