import React, { Component } from "react";

import { CBreadcrumb } from 'educoder';

import './new/common.css'
import '../css/Courses.css'

import ExerciseNewCommon from './ExerciseNewCommon'

class ExerciceNew extends Component {
  constructor(props) {
    super(props);
    this.state = {
      left_banner_id: null
    }
  }
  initData = (data) => {
    this.setState({ left_banner_id: data.left_banner_id })
  }
  componentDidMount() {
    document.title = this.props.coursedata && this.props.coursedata.name;
  }
  render() {
    let { left_banner_id } = this.state;
    const { current_user } = this.props
    const courseId = this.props.match.params.coursesId;
    return (
      <div className="newMain exerciseNew">

        <div className="edu-class-container edu-position courseForm">
          {current_user && <CBreadcrumb items={[
            { to: current_user && current_user.first_category_url, name: this.props.coursedata ? this.props.coursedata.name : '' },
            { to: `/classrooms/${courseId}/exercises/${left_banner_id}`, name: '试卷列表' },
            { name: this.isEdit ? '编辑试卷' : '新建试卷' }
          ]}></CBreadcrumb>}

          <p className="clearfix mt20 mb20">
            <span className="fl font-24 color-grey-3">{this.isEdit ? "编辑" : "新建"}试卷</span>
            <a href="javascript:void(0)" className="color-grey-6 fr font-16 mr2"
              onClick={() => this.props.history.push(`/classrooms/${courseId}/exercises/${left_banner_id}`)}>
              返回
              </a>
          </p>

          <ExerciseNewCommon
            {...this.props}
            {...this.state}
            isEdit={this.isEdit}
            initData={this.initData}
          ></ExerciseNewCommon>
        </div>
      </div>
    )
  }
}
export default ExerciceNew;