import React, { Component } from 'react';

import Dialog, {
	DialogActions,
	DialogContent,
	DialogContentText,
	DialogTitle,
} from 'material-ui/Dialog';
import { CircularProgress } from 'material-ui/Progress';

import Button from 'material-ui/Button';

import CommentContainer from '../../comment/CommentContainer'
import CommentInput from '../../comment/comment-input'

import ChooseAnswerView from '../component/ChooseAnswerView'

import AnswerListContainer from './answer/AnswerListContainer'
import './leftView.css'

import CodeEvaluateMultiLevelAnswerUnlock from './CodeEvaluateMultiLevelAnswerUnlock'
import moment from 'moment';
import RenderHtml from '../../../components/render-html';


class LeftView extends Component {

	goToCertification() {
		window.open('/account/certification', '_blank');
	}
	render() {
		let { challenge, shixun, tabIndex, tabIndexChange, loading, discusses_count
			, dialogOpen, handleDialogClose, handleDialogReadAnswer, gameAnswer, loadingComments, st, user,
			onDrawerButtonClick, lockedAnswers, unlockedAnswers, isMultiLevelAnswer, dialogContent } = this.props

		let propaedeutics = shixun ? shixun.propaedeutics : null;
		let taskPass = challenge ? challenge.task_pass : ''
		let _hasAnswer = challenge.hasAnswer // st === 1 ||
		const is_teacher = user.is_teacher

		let contentText = is_teacher ?
			<React.Fragment>
				<p>{`已经过职业认证的教师可以免金币查看答案哟~`}</p>
				<p>{`将扣除${challenge.score}点金币，是否确认查看答案`}</p>
				<p><a onClick={() => this.goToCertification()}
					style={{ textDecoration: 'underline', color: '#4CACFF' }}>立即认证</a></p>
			</React.Fragment>
			:
			<React.Fragment>
				<p>{`先查看参考答案，再通过评测的学生，实训作业有可能是零分哦~`}</p>
				<p>{`将扣除${challenge.score}点金币，是否确认查看答案`}</p>
			</React.Fragment>;

		// 多级别解锁
		if (isMultiLevelAnswer) {
			// power === 0 &&
			contentText = (is_teacher) ?
				<React.Fragment>
					<p>{`已经过职业认证的教师可以免金币查看答案哟~`}</p>
					<p><a style={{ textDecoration: 'underline' }} onClick={() => this.goToCertification()}
						style={{ color: '#1890ff', 'margin-top': '6px', display: 'inline-block' }}>立即认证</a></p>
					<CodeEvaluateMultiLevelAnswerUnlock
						ref="answerUnlock" lockedAnswers={lockedAnswers} unlockedAnswers={unlockedAnswers}
						challenge={challenge}
					>
					</CodeEvaluateMultiLevelAnswerUnlock>
				</React.Fragment>
				:
				<React.Fragment>
					<p>{`先查看参考答案，再通过评测的学生，实训作业将被扣分`}</p>
					<CodeEvaluateMultiLevelAnswerUnlock
						ref="answerUnlock" lockedAnswers={lockedAnswers} unlockedAnswers={unlockedAnswers}
						challenge={challenge}
					>
					</CodeEvaluateMultiLevelAnswerUnlock>
				</React.Fragment>;
		}

		return (
			<React.Fragment>
				<Dialog
					open={dialogOpen}
					disableEscapeKeyDown={true}
					onClose={handleDialogClose}
				>
					<DialogTitle id="alert-dialog-title">{"提示"}</DialogTitle>
					<DialogContent id="dialog-content" >
						<DialogContentText id="alert-dialog-description" style={{ textAlign: 'center' }}>
							{/* issues  29402添加课程设置是否可以查看答案*/}
							{dialogContent ? dialogContent : contentText}
						</DialogContentText>
					</DialogContent>
					<DialogActions id="dialog-actions">

						<Button onClick={handleDialogClose} color="primary" >
							取消
								</Button>
						<Button size="medium" variant={"raised"}
							onClick={() => {
								if (dialogContent) {
									handleDialogClose()
								}
								else {
									handleDialogReadAnswer(this.refs.answerUnlock ? this.refs.answerUnlock.getSelectedId() : '')
								}
							}}
							color="primary" autoFocus>
							{dialogContent ? '知道了' : is_teacher ? '继续查看' : '确定'}
						</Button>
					</DialogActions>

				</Dialog>

				<div className="-fit -layout-v" >
					<div className="-layout-v -flex -bg-white ">
						{/*新界面关卡名称显示、关卡金币显示*/}
						<div id="task_name_section" className="task_name_section">
							<a title={"点击查看全部任务"} onClick={onDrawerButtonClick}>
								<i className={"fa font-18 fa-list-ul"}></i>
							</a>
							<h3 className="subject">第{challenge.position}关：{challenge.subject}</h3>
							<span className="btn-cir-big ">{challenge.score}</span>
						</div>

						<ul id="tab_nav" className="-tab-nav">
							<li id="tab_nav_1" className={tabIndex === 0 ? `tab_hover` : ''} onClick={() => tabIndexChange(0)}>
								<a href="javascript:void(0);" className="tab_type" style={{ fontSize: '16px' }}>过关任务</a>
							</li>
							{/**/}
							{propaedeutics && <li id="tab_nav_2" className={tabIndex === 1 ? `tab_hover` : ''} onClick={() => tabIndexChange(1)}>
								<a href="javascript:void(0);" className="tab_type">背景知识</a>
							</li>}
							{_hasAnswer && <li id="tab_nav_3" className={tabIndex === 2 ? `tab_hover` : ''} onClick={() => tabIndexChange(2)}>
								<a href="javascript:void(0);" className="tab_type" style={{ fontSize: '16px' }}>参考答案</a>
							</li>}
							<li id="tab_nav_5" className={tabIndex === 4 ? `tab_hover` : ''} onClick={() => tabIndexChange(4)}
								style={{ display: 'none' }}>
								<a href="javascript:void(0);" className="tab_type" style={{ fontSize: '16px' }}>TA人解答</a>
							</li>
							<li id="tab_nav_4" className={tabIndex === 3 ? `tab_hover` : ''} onClick={() => tabIndexChange(3)}>
								<a className="tab_type" style={{ fontSize: '16px' }} data-remote="true">
									评论<span id="discusses_count" className="edu-cir-grey1" style={{ lineHeight: '18px!important' }}>{discusses_count || ""}</span>
								</a>
							</li>
						</ul>
						<div className="cl"></div>
						<div className="-flex -relative greytab-inner">
							{/*过关任务*/}
							<div id="tab_con_1" className="tab-info" style={tabIndex === 0 ? { display: 'block' } : { display: 'none' }}>
								<div className="fit -scroll">
									<div className="-layout-v -fit">
										{loading ?
											<div className="-flex -scroll task-padding16 panel-box-sizing new_li break_word markdown-body editormd-html-preview"
												unselectable="on">
												<CircularProgress size={40} thickness={3} className="circularProgress"
													style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '40% !important', display: 'block' }} />
											</div> : ""
										}
										<RenderHtml className="-flex -scroll task-padding16 panel-box-sizing new_li break_word  editormd-html-preview"
											style={loading ? { display: 'none' } : {}} value={taskPass} />
									</div>
								</div>
							</div>
							{/*背景知识*/}
							<div id="tab_con_2" className="tab-info" style={tabIndex === 1 ? { display: 'block' } : { display: 'none' }}>
								<div className="fit -scroll">
									<div className="-layout-v -fit">
										<RenderHtml className="-flex -scroll task-padding16 panel-box-sizing new_li  editormd-html-preview" value={propaedeutics} /> </div>
								</div>
							</div>
							{/*	参考答案*/}
							<div id="tab_con_3" className="tab-info" style={tabIndex === 2 ? { display: 'block' } : { display: 'none' }}>
								<div className="fit -scroll">
									<div className="-layout-v -fit" style={{ overflowY: 'scroll' }}>

										{(!unlockedAnswers || unlockedAnswers.length === 0) && (!lockedAnswers || lockedAnswers.length === 0) &&
											<RenderHtml className="-flex -scroll task-padding16 panel-box-sizing new_li" value={gameAnswer}
												style={{ display: st === 0 ? 'block' : 'none' }} />
										}

										<style>{`
												.multiLevelAnswer {
													margin: 0px 12px;
												}
												.multiLevelAnswer .anwserSection {
													padding: 20px;
													border-bottom: 1px solid #EAEAEA;
												}
												.multiLevelAnswer .df {
													display: flex;
													font-size: 15px;
												}
												.multiLevelAnswer .level {
													color: #9A9A9A;
													flex: 0 0 55px;
												}
												.multiLevelAnswer .name{
													color: #4C4C4C;
													flex: 1;
												}
												.multiLevelAnswer .status{
													color: #CDCDCD;
                        }
                        .multiLevelAnswer .lock-time{
                          margin-right: 15px;
                        }
												.markdown-body ol, .markdown-body ul {
													padding-left: 2.5em;
												}
											`}</style>

										<div className="multiLevelAnswer">
											{unlockedAnswers && unlockedAnswers.map((item, index) => {
												const { name, contents, view_time } = item;
												return <div className="anwserSection" key={index}>
													<div className="df">
														<div className="level">级别{index + 1}：</div>
														<div className="name">{name}</div>
														<div className="status">
															<span className="lock-time">{view_time ? moment(view_time).format('YYYY-MM-DD HH:mm') : ''}</span>
                                已解锁
                              </div>
													</div>
													<RenderHtml value={contents} className='contents' />
												</div>
											})}

											{lockedAnswers && lockedAnswers.map((item, index) => {
												return <div className="anwserSection" key={index}>
													<div className="df">
														<div className="level">级别{index + 1 + (unlockedAnswers ? unlockedAnswers.length : 0)}：</div>
														<div className="name">{item.name}</div>
														<div
															className="status" onClick={() => { this.props.showUnlockAnswerDialog(item) }}
															style={{ color: '#4CACFF', cursor: 'pointer' }}
														>解锁</div>
													</div>
												</div>
											})}

										</div>


										{st === 1 ?
											<div className="-flex -scroll task-padding16 panel-box-sizing new_li" id="game_answer_show_choose"
											>
												<ChooseAnswerView gameAnswer={gameAnswer}></ChooseAnswerView>
											</div>
											: ''
										}
									</div>
								</div>
							</div>
							{/*	TA人解答*/}
							<div id="tab_con_5" className="tab-info" style={tabIndex === 4 ? { display: 'block' } : { display: 'none' }}>
								<div className="fit -scroll">
									<div className="-layout-v -fit">
										<AnswerListContainer {...this.props}></AnswerListContainer>
									</div>
								</div>
							</div>
							<div id="tab_con_4" className="commentTab tab-info commentsDelegateParent" style={tabIndex === 3 ? { display: 'block' } : { display: 'none' }}>
								{loadingComments ?
									<CircularProgress size={40} thickness={3} style={{ marginLeft: 'auto', marginRight: 'auto', marginTop: '40%', display: 'block' }} /> :
									<CommentContainer {...this.props}></CommentContainer>
								}
							</div>
						</div>

						<div id="mini_comment_section">
							{/*说点什么	*/}
							<CommentInput challenge={challenge} {...this.props}></CommentInput>
						</div>
					</div>

				</div>
			</React.Fragment>
		);
	}
}
export default LeftView;
