import React, { Component } from 'react';
import { SnackbarHOC } from 'educoder';
import {Link} from 'react-router-dom';
import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';
import Loadable from 'react-loadable';
import Loading from '../../../Loading';
import { CNotificationHOC } from '../common/CNotificationHOC'
import { RouteHOC } from './common'

import locale from 'antd/lib/date-picker/locale/zh_CN';
import { WordsBtn, MarkdownToHtml, trigger } from 'educoder';
import axios from 'axios';
import Modals from '../../modals/Modals';
import CoursesListType from '../coursesPublic/CoursesListType';
import AccessoryModal from "../coursesPublic/AccessoryModal";
import PublishRightnow from './PublishRightnow'

import '../css/Courses.css'
import CBreadcrumb from '../common/CBreadcrumb'

//引入对应跳转的组件

//新建分组/普通作业
const NewWork = Loadable({
    loader: () => import('./NewWork'),
    loading:Loading,
})

const CommonWorkSetting = Loadable({
  loader: () => import('./CommonWorkSetting'),
  loading:Loading,
})
const CommonWorkList = Loadable({
  loader: () => import('./CommonWorkList'),
  loading:Loading,
})
const CommonWorkQuestion = Loadable({
  loader: () => import('./CommonWorkQuestion'),
  loading:Loading,
})
const CommonWorkAnswer = Loadable({
  loader: () => import('./CommonWorkAnswer'),
  loading:Loading,
})
const CommonWorkAppraise = Loadable({
  loader: () => import('./CommonWorkAppraise'),
  loading:Loading,
})

const CommonWorkPost = Loadable({
  loader: () => import('./CommonWorkPost'),
  loading:Loading,
})

const CommonWork = Loadable({
  loader: () => import('./commonWork'),
  loading:Loading,
})
class CommonWorkDetailIndex extends Component{
  constructor(props) {
    super(props)
    this.publishModal = React.createRef();
    this.endModal = React.createRef();
    this.state = {

    }
  }
  initWorkDetailCommonState = (data) => {
    this.setState({
        ...data
    })
  }
  goback = () => {
    let workId=this.props.match.params.workId;

    if ( window.location.pathname.indexOf('appraise') == -1) {
      let category_id= this.state.category.category_id;
      this.props.toListPage(this.props.match.params, category_id)
    } else {
      this.props.toWorkListPage(this.props.match.params, workId)
    }
  }

   // 补交附件
  Cancelvisible=()=>{
    this.setState({
      accessoryVisible:false
    })
  }

  addAccessory=()=>{
    this.setState({
      accessoryVisible:true
    })
  }
  setupdate = () => {

  }
  doWhenSuccess = () => {
    trigger('commonwork_fetch_all')
  }
  render() {
    let {course_name, homework_name, homework_status, noTab
        , view_answer, author_name, category, work_id

        , end_immediately, publish_immediately, work_statuses, accessoryVisible
    } =this.state;

    let courseId=this.props.match.params.coursesId;
    let category_id= category && category.category_id;
    let workId=this.props.match.params.workId;
    const studentWorkId = this.props.match.params.studentWorkId

    const isGroup = this.props.isGroup()
    const moduleName = !isGroup? "普通作业":"分组作业";
    const moduleEngName = this.props.getModuleName()

    const childModuleName = this.state.moduleName
    const commonHandler = {
        initWorkDetailCommonState: this.initWorkDetailCommonState
    }
    const isAdmin = this.props.isAdmin()

    let exportUrl = `/api/homework_commons/${workId}/works_list.zip`
    const exportResultUrl = `/api/homework_commons/${workId}/works_list.xlsx`

    return (
        <div>
          <PublishRightnow ref={this.publishModal} showActionButton={false} {...this.props} checkBoxValues={[workId]} 
                isPublish={true} doWhenSuccess={this.doWhenSuccess} checkBeforePost={this.saveWorkSetting}
                onToPublishClick={this.onToPublishClick}
          ></PublishRightnow>
          <PublishRightnow ref={this.endModal} showActionButton={false} {...this.props} checkBoxValues={[workId]} 
                isPublish={false} doWhenSuccess={this.doWhenSuccess}></PublishRightnow> 
          <div className="newMain clearfix worklist1">
            <div className={"educontent mt20"}>
              <style>{`
                .memoContent {
                  background: #fff;
                }
              `}</style>
              <CBreadcrumb items={[
                { to: `/courses/${courseId}`, name: course_name},
                { to: `/courses/${courseId}/${moduleEngName}/${category_id}`, name: moduleName },
                window.location.pathname.indexOf('appraise') == -1 ? { } : { to: `/courses/${courseId}/${moduleEngName}/${workId}/list`, name: '作业详情' },
                // 1.	与上一条联动，当匿评他人作品时，TA人作品的作者真实姓名切换为“匿名”
                window.location.pathname.indexOf('appraise') == -1 ? { name: '作业详情' } : { name: author_name },
                // window.location.pathname.indexOf('appraise') == -1 ? { } : { to: `/courses/${courseId}/${moduleEngName}/${workId}/list`, name: '作品列表' },
                // { name: childModuleName }
              ]}></CBreadcrumb>

              <div style={{ width:'100%',height:'52px'}} >
                <span className=" fl color-black summaryname" title={`${homework_name && homework_name.length > 36 ? homework_name : ''}`}>
                   {homework_name}
                  {/* <Link to={"/courses/"+courseId+"/graduation"+"/graduation_tasks/"}>{homework_name}</Link> */}
                </span>
                <CoursesListType
                  typelist={homework_status}
                  typesylename={"mt12"}
                />
               

                {category && <a className="color-grey-6 fr font-16 ml30 mt5 mr20" onClick={this.goback} style={{ marginRight: '26px'}}>返回</a>}

                {this.state.update_atta &&
                <React.Fragment>
                    {this.state.accessoryVisible===true? <AccessoryModal
                    {...this.props}
                    modalname={"补交附件"}
                    visible={this.state.accessoryVisible}
                    Cancelname={"取消"}
                    Savesname={"确认"}
                    Cancel={this.Cancelvisible}
                    setupdate={this.setupdate}
                    seeworks={undefined}
                    reviseAttachmentUrl={`/student_works/${work_id || studentWorkId}/revise_attachment.json`}
                  />:""}
                  <a className={"fr color-blue font-16 mt7"} href={"javascript:void(0)"}
                    onClick={this.addAccessory}
                  >补交附件</a>
                </React.Fragment>

                }
              </div>

              { noTab !== true && <div className="stud-class-set bor-bottom-greyE">
                <div className="mt10 clearfix edu-back-white poll_list pl5">
                  <Link 
                        onClick={() => this.setState({moduleName: '作品列表'})}
                        className={`${childModuleName == '作品列表' ? 'active' : '' } `}
                        to={`/courses/${courseId}/${moduleEngName}/${workId}/list`}>作品列表</Link>
                  <Link 
                        onClick={() => this.setState({moduleName: '作业问答'})}
                        className={`${childModuleName == '作业问答' ? 'active' : '' } `}
                        to={`/courses/${courseId}/${moduleEngName}/${workId}/question`}>作业问答</Link>
                  {view_answer == true && <Link 
                        onClick={() => this.setState({moduleName: '参考答案'})}
                        className={`${childModuleName == '参考答案' ? 'active' : '' } `} 
                        to={`/courses/${courseId}/${moduleEngName}/${workId}/answer`}>参考答案</Link>}
                  <Link
                        onClick={() => this.setState({moduleName: '设置'})}
                        className={`${childModuleName == '设置' ? 'active' : '' } `}
                        style={{paddingLeft:'38px'}}
                        to={`/courses/${courseId}/${moduleEngName}/${workId}/setting`}>设置</Link>
                  

                  {/* { this.props.tabRightComponents }  */}
                  <React.Fragment>
                    <style>{`
                        .drop_down_menu li a {
                            padding: 0px;
                            font-size: 14px;
                        }
                        .drop_down_menu {
                            width: 121px;
                        }
                        .drop_down_menu li {
                            overflow: visible;
                            width: 121px;
                        }
                        .drop_down_menu, .drop_down_normal {
                            padding-top: 10px;
                            padding-bottom: 8px;
                        }
                        `}</style>
                        {this.props.isAdmin()? <li className="li_line drop_down fr color-blue font-16 mr8 mt20" style={{"padding":"0 20px"}}>
                        导出<i className="iconfont icon-xiajiantou font-12 ml2"></i>
                        <ul className="drop_down_menu" style={{"right":"-34px","left":"unset","height":"auto"}}>
                            <li><a href={exportResultUrl} className="color-dark">导出成绩</a></li>
                            <li><a href={exportUrl} className="color-dark">导出作品附件</a></li>
                        </ul>
                        </li>:""}

                        {/* {isAdmin && <a className={"fr color-blue font-16"} href={exportUrl}>导出作品附件</a>}
                        {isAdmin && <a className={"fr color-blue font-16"} href={exportResultUrl}>导出成绩</a>} */}
                        {/*<a className={"fr color-blue font-16"}>导出</a>*/}
                        {end_immediately &&  <a className={"fr color-blue font-16"} onClick={() => { this.endModal.current.open() } }>立即截止</a>}
                        {publish_immediately && <a className={"fr color-blue font-16"} onClick={() => { this.publishModal.current.open() } } >立即发布</a>}

                        {/*<a className={"fr color-blue font-16"}>项目在线质量检测</a>*/}
                        {isAdmin && <a className={"fr color-blue font-16"} onClick={() => this.props.toEditPage(this.props.match.params, workId)}>编辑作业</a>}

                        {work_statuses && work_statuses.indexOf('提交作品') != -1 && <a className={"fr color-blue font-16"} href={"javascript:void(0)"}
                            onClick={() => { this.props.toWorkPostPage(this.props.match.params)}}
                        >提交作品</a>}

                        { work_statuses && work_statuses.indexOf('补交作品') != -1 &&
                        <a className={"fr color-blue font-16"} href={"javascript:void(0)"}
                            onClick={() => { this.props.toWorkPostPage(this.props.match.params, null, true, work_id)}}>
                        补交作品</a> }

                        {work_statuses && work_statuses.indexOf('修改作品') != -1 && <a className={"fr color-blue font-16"} href={"javascript:void(0)"}
                            onClick={() => { this.props.toWorkPostPage(this.props.match.params, null, true, work_id)}}
                        >修改作品</a>}
                        {work_statuses && work_statuses.indexOf('补交附件') != -1 && 
                        <React.Fragment>
                        <AccessoryModal
                            {...this.props}
                            modalname={"补交附件"}
                            visible={accessoryVisible}
                            Cancelname={"取消"}
                            Savesname={"确认"}
                            Cancel={this.Cancelvisible}
                            setupdate={this.setupdate}
                            reviseAttachmentUrl={`/student_works/${work_id}/revise_attachment.json`}
                        />
                        <a className={"fr color-blue font-16"} href={"javascript:void(0)"}
                            onClick={this.addAccessory}
                        >补交附件</a>
                        </React.Fragment>
                        
                        }
                    </React.Fragment>

                </div>
            </div> }

                {/* 内容区 */}
                <Switch {...this.props}>
            
                    {/* --------------------------------------------------------------------- */}

                    {/* 作业设置 */}
                    {/* http://localhost:3007/courses/1309/homework/9300/setting */}
                    <Route exact path="/courses/:coursesId/common_homeworks/:workId/setting"
                        render={
                        (props) => (<CommonWorkSetting {...this.props} {...props} {...this.state} {...commonHandler}/>)
                        }
                    ></Route>

                    {/* 作品列表 */}
                    <Route exact path="/courses/:coursesId/common_homeworks/:workId/list"
                        render={
                        (props) => (<CommonWorkList {...this.props} {...props} {...this.state} {...commonHandler}/>)
                        }
                    ></Route>

                    {/* 作业问答 */}
                    <Route exact path="/courses/:coursesId/common_homeworks/:workId/question"
                        render={
                        (props) => (<CommonWorkQuestion {...this.props} {...props} {...this.state} {...commonHandler}/>)
                        }
                    ></Route>
                    <Route exact path="/courses/:coursesId/common_homeworks/:workId/answer"
                        render={
                        (props) => (<CommonWorkAnswer {...this.props} {...props} {...this.state} {...commonHandler}/>)
                        }
                    ></Route>


                    <Route exact path="/courses/:coursesId/group_homeworks/:workId/setting"
                        render={
                        (props) => (<CommonWorkSetting {...this.props} {...props} {...this.state} {...commonHandler}/>)
                        }
                    ></Route>

                    {/* 作品列表 */}
                    <Route exact path="/courses/:coursesId/group_homeworks/:workId/list"
                        render={
                        (props) => (<CommonWorkList {...this.props} {...props} {...this.state} {...commonHandler}/>)
                        }
                    ></Route>

                    {/* 作业问答 */}
                    <Route exact path="/courses/:coursesId/group_homeworks/:workId/question"
                        render={
                        (props) => (<CommonWorkQuestion {...this.props} {...props} {...this.state} {...commonHandler}/>)
                        }
                    ></Route>
                    <Route exact path="/courses/:coursesId/group_homeworks/:workId/answer"
                        render={
                        (props) => (<CommonWorkAnswer {...this.props} {...props} {...this.state} {...commonHandler}/>)
                        }
                    ></Route>
                </Switch>
            </div>
          </div>
        </div>
        
    )
  }
}

export default  ( CommonWorkDetailIndex) ;