import React, { lazy, Suspense } from "react"

import "crowdsorcerer/dist/app.css"
import withSimpleErrorBoundary from "../util/withSimpleErrorBoundary"
const CrowdSorcerer = lazy(() => import("crowdsorcerer"))

class CrowdSorcererWrapper extends React.Component {
  state = {
    render: false,
  }

  componentDidMount() {
    this.setState({ render: true })
  }

  render() {
    if (!this.state.render) {
      return <div>Loading...</div>
    }
    const assignmentId = this.props.id
    const exercises = this.props.exercisecount
    const review = this.props.peerreview

    return (
      <div id={`crowdsorcerer-${assignmentId}`}>
        <Suspense fallback={<div>Loading...</div>}>
          <CrowdSorcerer
            assignmentId={assignmentId}
            exercises={exercises}
            review={review}
          />
        </Suspense>
      </div>
    )
  }
}

export default withSimpleErrorBoundary(CrowdSorcererWrapper)