import './header.scss';
import React, { Component } from 'react';
import { withStyles } from 'material-ui/styles';
import Drawer from 'material-ui/Drawer';

import TaskListContainer from './taskList/TaskListContainer'
import TaskResultLayer from './layers/TaskResultLayer'
import Tooltip from 'material-ui/Tooltip';

function pad(num) {
	return ("0" + num).slice(-2);
}
function hhmmss(secs) {
	var minutes = Math.floor(secs / 60);
	secs = secs % 60;
	var hours = Math.floor(minutes / 60)
	minutes = minutes % 60;
	return pad(hours) + ":" + pad(minutes) + ":" + pad(secs);
}


const styles = theme => ({
	button: {
		margin: theme.spacing.unit,
		background: '#05101A',
		color: '#4CACFF',
		top: '-6px'
	},
});

class Header extends Component {


	goBack() {
		const { shixun } = this.props
		const url = `/shixuns/${shixun.identifier}/challenges`
		window.location.href = url;
	}


	render() {
		const { challenge, shixun, grade, user, game,
			onChallengesDrawerClose, myshixun_manager,
			onStarChange, saveChallengeStar, challengesDrawerOpen, taskListLoading, challenges, showSnackbar, closeTaskResultLayer } = this.props
		return (
			<div className="task-page-header tpi_content" id="myshixun_top">
				<TaskResultLayer {...this.props} onStarChange={onStarChange} saveChallengeStar={saveChallengeStar}></TaskResultLayer>
				<Drawer
					className="leftNavDrawer"
					width={500}
					open={challengesDrawerOpen}
					onClose={() => onChallengesDrawerClose()}
				>

					<TaskListContainer challenges={challenges} taskListLoading={taskListLoading} shixun={shixun}
						challenge={challenge} onStarChange={onStarChange} saveChallengeStar={saveChallengeStar}
						onChallengesDrawerClose={() => onChallengesDrawerClose()}
						showSnackbar={showSnackbar} closeTaskResultLayer={closeTaskResultLayer}
						myshixun_manager={myshixun_manager}
					>

					</TaskListContainer>

				</Drawer>

				<div className="headerLeft">


					<div className="userInfo">
						<a href={user.user_url} target="_blank">
							{user.image_url && <img alt="0?1442652658" width="35" height="35" src={`../images/${user.image_url}`} />}
						</a>
						<a href={user.user_url} className="userInfoName" target="_blank">{user.username}</a>
					</div>

					{(grade || grade == 0) && <div className="-header-right clearfix">
						<span style={{ width: '20px', height: '20px', background: '#FFD633', borderRadius: '10px', marginTop: '3px' }} className="fl"></span>
						<span className="ml5 color-white fl" id="user_grade">
							<span>{grade === 0 ? grade : (grade || '')}</span>
						</span>
					</div>}



				</div>


				<div className="-layout-h ml10 headerCenter">
					<h2 className="-header-title task-hide color-white">{shixun ? shixun.name || '' : ''}</h2>
					<Tooltip title="本关通关耗时">
						<div className="timeRecord">{game && hhmmss(game.cost_time)}</div>
					</Tooltip>
				</div>

				<div className="headerRight">
					<div className="fr">
						{shixun ?
							<a href={`/shixuns/${shixun.identifier}/challenges`} className="mr20 mt8 exit_btn">
								<i className="fa fa-power-off font-16"></i>
								<span>{'退出实训'}</span>
							</a>
							: null}
					</div>
				</div>
			</div>
		);
	}
}

export default withStyles(styles)(Header);
