import React, { Component } from 'react';

import {BrowserRouter as Router,Route,Switch} from 'react-router-dom';

import { Breadcrumb } from 'antd';
import { SnackbarHOC } from 'educoder';
import { TPMIndexHOC } from '../../../tpm/TPMIndexHOC';
import { CNotificationHOC } from '../../../courses/common/CNotificationHOC'


import "../usersInfo.css"
import "../../../courses/css/members.css"
import "../../../courses/css/Courses.css"


import Loadable from 'react-loadable';
import Loading from '../../../../Loading';

// 毕设选题
const GtopicBanks = Loadable({
	loader: () => import('./GtopicBanks'),
	loading: Loading,
})

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

class BanksIndex extends Component{
  constructor(props){
    super(props);
    this.state={
      crumbData:undefined
    }
  }

  initPublic = (crumbData) =>{
    this.setState({
      crumbData
    })
  }

  render(){
    let { crumbData }=this.state
    const common = {
      initPublic:this.initPublic
    }
    return(
      <div className="newMain">
        <div className="educontent">
          {
            crumbData &&
            <Breadcrumb separator=">" className="breadcrumb">
              <Breadcrumb.Item href="/users/innov/banks">题库</Breadcrumb.Item>
              {
                crumbData.crumbArray && crumbData.crumbArray.map((item,key)=>{
                  return(
                    <Breadcrumb.Item href={item.to || ""}>{item.content}</Breadcrumb.Item>
                  )
                })
              }          
            </Breadcrumb>
          }
          
          <p className="clearfix mt20 mb20">
            <span className="fl font-24 color-grey-3 task-hide lineh-30" style={{maxWidth:'800px'}}>{crumbData && crumbData.title}</span>
            {
              crumbData && crumbData.is_public && <span className="bank_is_public">{crumbData.is_public == true ? '公开':'私有'}</span>
            }
          </p>

          <Switch {...this.props}>
            
            <Route path='/banks/gtopic/:bankId/edit' 
              render={
                (props) => {
                  return (<GtopicBanksEdit {...this.props} {...props} {...this.state} {...common}/>)
                }
            }></Route>

            <Route path='/banks/gtopic/:bankId' 
              render={
                (props) => {
                  return (<BanksTabIndex {...this.props} {...props} {...this.state} {...common}/>)
                }
            }></Route>
            
          </Switch>

        </div>
      </div>
    )
  }
}
export default CNotificationHOC() ( SnackbarHOC() ( TPMIndexHOC(BanksIndex) ));