// WebSSHTimer.js
import React, { Component } from 'react';

import Drawer from 'material-ui/Drawer';
import PropTypes from 'prop-types';

import { withStyles } from 'material-ui/styles';

import { green } from 'material-ui/colors';
import { CircularProgress } from 'material-ui/Progress';
import Tooltip from 'material-ui/Tooltip';

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

import Button from 'material-ui/Button';

import axios from 'axios';

import moment from 'moment';

import MUIDialogStyleUtil from './MUIDialogStyleUtil'

import './WebSSHTimer.css'

import Popconfirm from 'antd/lib/popconfirm';
import 'antd/lib/popconfirm/style/css';
import { on, off } from 'educoder'
const styles = MUIDialogStyleUtil.getTwoButtonStyle()

const $ = window.$;
const five_min = 5 * 60 * 1000;
/*

	当倒计时为0时，客户端发起主动关闭ssh的请求 `close_webssh`
		当倒计时到5分钟的时候，提示用户是否续时，每次续时时长为20分钟
	如果ssh因为服务端的某些未知原因中断，这里需要提供重连的策略

	有输入时，会暂停第一个倒计时，并开启一个60s的倒计时，
	如果用户一直不输入，则60s倒计时结束时，重置第一个倒计时为20分钟，并继续倒计时。
	https://www.trustie.net/issues/17698
	TODO 每次点击“申请延时”按钮，直接增加20分钟的时间
	倒计时为0时，出现“重启”按钮
*/
const isSSHInIframe = false;
class WebSSHTimer extends Component {

	constructor(props) {
		super(props)
		this.startTimeRemain = 0;
		// 用户点击取消时，变量设置为true
		this.isUserChoseNotConcern= false
		this.state = {
			showTimer: true,	//  倒计时为0时，设置为false
			loading: false,
		  	dialogOpen: false

		}
	}

	init() {
		// 20分钟倒计时
		this.timeRemain = 20 * 60 * 1000;
		this.startTimeRemain = 0
		// 倒计时出来！
		this.forceUpdate()
		const { game } = this.props;
		if (this.intervalHandler) {
			clearInterval(this.intervalHandler);
			this.intervalHandler = null;
		}
		this.intervalHandler = setInterval(() => {
			if (this.startTimeRemain > 0) {		// 等倒计时结束了再计算时间
				this.startTimeRemain--;
				if (this.startTimeRemain === 0) {
					// 重置主倒计时时长：20分钟
					this.timeRemain = 20 * 60 * 1000;
					$('.webSSHTimer').html(moment(this.timeRemain).format('mm:ss'))
					this.forceUpdate()
				}
				return;
			} 
			let _timeRemain = this.timeRemain;

			$('.webSSHTimer').html(moment(_timeRemain).format('mm:ss'))
			_timeRemain -= 1000
			this.timeRemain = _timeRemain;
			if (this.state.dialogOpen && _timeRemain % ( 60 * 1000 ) === 0) {	// 
				this.forceUpdate()
			}
			// 余5分钟的时候弹框通知		// 从代码文件切换回命令行时，要查看该时间
			if (_timeRemain === five_min) {
				
				this.setState({
		  			dialogOpen: true
		  		})		
				
			} else if (_timeRemain <= 0) {
				// 到时间了，触发删除pod的请求
				clearInterval(this.intervalHandler);
				this.intervalHandler = null;

				this.closeWebsshSocket();
				// this.closeWebssh()
				this.props.setSSHClosed(true)
				this.setState({
					showTimer: false,
  					dialogOpen: false	// 弹框可能未被关闭
				})
			}

		}, 1000)
	}
	closeWebsshSocket = () => {
		// 非iframe模式使用
		window.postMessage({tp: 'close_ssh_cocket'}, "*");

		/**
			启用iframe模式需要改的地方：
				ssh消息的发送和接收，消息得种类有：
				发送
				1、postMessage({tp: 'sshWorking'}, "*");                    ssh正在被使用
				2、window.parent.postMessage({tp: 'setSSHConnectStatus', tab: options.tab}, "*");
				
				接收
				1、 if(event.data.tp === 'resize'){   改变命令行窗体大小
				2、 } else if (event.data.tp === 'reload') {            异常中断后重连
				3、 } else if (event.data.tp === 'close_ssh_cocket') {  中断命令行websocket

				接收1的发送代码位于：
				js_min_all.js的这个方法：function update_rows_and_cols(rows) {
				其余的代码位于CodeRepository.js 或 WebSSHTimer.js
		 */
		// iframe模式使用
		// TODO 这里多ssh tab的话，需要调用每个window的 close_ssh_cocket
		// let windows = this.getWebsshWindows();
		// for (let i = 0; i < windows.length; i++) {
		// 	let _w = windows[i].contentWindow
		// 	_w && _w.postMessage({tp: 'close_ssh_cocket'}, "*");
		// }
	}
	// 重置命令行的时候调用的接口，会删pod
	closeWebssh = (callback) => {
		// 先关socket
		this.closeWebsshSocket()

		const { game } = this.props;
		// const url = `/api/v1/games/${game.identifier}/close_webssh`
		const url = `/tasks/${game.identifier}/close_webssh.json`
        axios.get(url, { },
            {
                // withCredentials: true
            }
		).then((response) => {
			if (response.data.status === 1) { 
				
			}
			callback && callback(response)
		}).catch((error) => {
			console.log(error)
		})
	}
	componentDidUpdate(prevProps, prevState, snapshot) {
		// 仅初始化一次
		if (prevProps.showTimerProp === false && this.props.showTimerProp === true) {
			if (this.intervalHandler) {
				const { showTimer } = this.state;
				// 用户从代码切换命令行，如果时间不够了也要提示是否续时
				if (this.isUserChoseNotConcern === false && showTimer === true && this.timeRemain < five_min) {
					this.setState({
						dialogOpen: true
					})
				}
			} else {
				this.init()
			}
		}
	}
	componentDidMount() {
		// 发现非iframe ssh也能使用postMessage
		// iframe时使用的消息机制
		// if (isSSHInIframe === true) {
			window.addEventListener('message', (e) => {
				if (this.state.showTimer === false) { // 已经触发了close_webssh
					return;
				}
				if(e.data.tp === "setSSHConnectStatus"){
					this.props.reInitSsh(window.$, null, true)
					
					// let windows = this.getWebsshWindows();
					// for (let i = 0; i < windows.length; i++) {
					// 	let _w = windows[i].contentWindow
					// 	_w && _w.postMessage({tp: 'reload'}, "*");
					// }
					
				} else if (e.data.tp === "sshWorking") {
					this.startTimeRemain = 60;
					this.forceUpdate()
				}
			});
		// } else {
		// 	// 非iframe时使用的消息机制
		// 	on('setSSHConnectStatus', () => {
		// 		// 需要reload
		// 		this.props.reInitSsh(window.$, null, true)
		// 	})

		// 	on('sshWorking', () => {
		// 		this.startTimeRemain = 60;
		// 		this.forceUpdate()
		// 	})
		// }
	}
	getWebsshWindows = () => {
		return $('.game_webssh')
		// var i = $('#game_webssh')[0]
		// var _w;
		// if (i) {
		// 	_w = i.contentWindow
		// }
		// return _w;
	}
	componentWillUnmount() {
		this.intervalHandler && clearInterval(this.intervalHandler);
	}
	handleDialogClose = () => {
		this.setState({
			dialogOpen: false
		})
	}
	onNope = () => {
		// 用户不续时，移除interval，无需再显示Timer
		// 用户不续时，隐藏dialog
		this.setState({
		// showTimer: false,
			dialogOpen: false
		})
		this.isUserChoseNotConcern = true
		// this.intervalHandler && clearInterval(this.intervalHandler);
	}
	onOK = () => {
		// 用户续时，+15min    // 用户操作多次后，自动续时？
		if (this.timeRemain > 0) {
			this.timeRemain += 20 * 60 * 1000;
		}
		this.setState({
			dialogOpen: false
		})
	}
	reInitSsh = () => {
		this.setState({
			showTimer: true
		})
		this.init();
		this.props.reInitSsh(window.$, null, true)
	}
	resetSsh = () => {
		this.closeWebssh((res) => {

			// message: webssh closed
			if (res.data.status === 1) {
				this.reInitSsh()
			}
		})
	}
	render() {
		const { myshixun, showUpdateDialog, classes } = this.props;
		const { showTimer, loading, dialogOpen } = this.state;

	    return (
	    	<React.Fragment>
	    		<Dialog
	        	disableBackdropClick={true}
	        	className="updateDialog"
	          	open={ dialogOpen && this.isUserChoseNotConcern === false }
	          	onClose={() => this.handleDialogClose()}
	        >	
		       	<DialogTitle id="alert-dialog-title">{"命令行连接时长提醒"}</DialogTitle>
						<DialogContent id="dialog-content">
							<div style={{textAlign: 'center'}}>
								命令行将于 {moment(this.timeRemain).format('m')} 分钟后中断，需要延长使用时间吗？
							</div>
						</DialogContent>
						<DialogActions id="dialog-actions">
							<React.Fragment>
								<Button 
									disabled={loading}
									className={ "nextUpdate " + classes.button + ' ' + classes.buttonGray} onClick={() => this.onNope()} color="primary" >
									不需要
								</Button>
								<Button 
									disabled={loading}
									variant="raised" onClick={() => this.onOK()} color="primary" className={"updateNow " + classes.button}>
									立即延长
								</Button>
								{/* loading && <CircularProgress size={24} className={classes.buttonProgress} /> */}
							</React.Fragment>
						}
						</DialogActions>
	        </Dialog>
	    	
			<Tooltip title="中断命令行连接的倒计时">
		        {/* <span className="webSSHTimer" 
		        	style={{ display: (showTimer && this.props.showTimerProp === true &&
						this.startTimeRemain <= 0 ? 'inline-block' : 'none')}}>
		        	
		        </span> */}
				<a href="javascript:void(0)" className="iconButton" 
					style={{ display: (showTimer && this.props.showTimerProp === true &&
						this.startTimeRemain <= 0 ? 'inline-block' : 'none'),
						cursor: 'default'}} >
					<i className="iconfont icon-shijian font-16 "></i>
					<span className="webSSHTimer"></span>
				</a>
	        </Tooltip>

			{ this.props.showTimerProp === true && showTimer === true && 
				<Popconfirm 
					title={<span><p>实验环境将恢复到初始状态，</p><p>是否确认重置实验环境?</p></span>} 
					placement="bottom"
					onConfirm={this.resetSsh} okText="确定" cancelText="取消">
					
						<a href="javascript:void(0)" className="iconButton" >
							<i className="iconfont icon-zhongzhi2 font-16 "></i>
							<span style={{ 	userSelect: 'none', verticalAlign: 'middle',
    										fontSize: '13px', marginLeft: '2px' }}>
								 重置命令行</span>
						</a>
				</Popconfirm>
			 }
			 {/* <Tooltip title={ ""} disableFocusListener={true}>
					</Tooltip> */}
			
	        { showTimer === false && this.props.showTimerProp === true && 
                <a href="javascript:void(0)" className="iconButton" onClick={this.reInitSsh} >
                    <i className="iconfont icon-congshulianjie font-16 "></i>
					<span style={{ 	userSelect: 'none', verticalAlign: 'middle',
							fontSize: '13px', marginLeft: '2px' }}>
						重连命令行</span>
                </a>
            }
			{/* <Tooltip title={ "命令行重连"} disableFocusListener={true}></Tooltip> */}
			
				</React.Fragment>
	    );
  	}
}

export default withStyles(styles) ( WebSSHTimer ) ;