import React from 'react';
import ReactDOM from 'react-dom'
import * as SC from './SComponents'
import * as State from './state'
import * as steps from './steps'
import * as Antd from 'antd'
import { connect } from 'react-redux'
import './TaskHeader.scss'
import * as Shared from 'placeholder-shared'
import * as Common from './common'

const mapProps = (state, ownProps) => {
    return  {
		dirty: state['dirty'], 
		taskData: state['currentTask']?  state['tasks'][state['currentTask']]: {},
		currentTask:state['currentTask']
    }
}

const mapDispatch = (dispatch, ownProps) => {
    return  {}
}

export const TaskHeaderInternal = (props) => {
	const { className } = props;
	return <div className={
		Common.classNames({
			'TaskHeader': true,
			'rowFlexBox': true,
			'justifyContentCenter': true,
			[className]: className
		})} >
				<h4 className="taskText" >{props.name}</h4>
			{ props.children }
		</div >
}
export class TaskHeader extends React.Component {
    constructor(props) {
        super(props)
    }
    render(){
		if (this.props.taskData.request) {
			return null
		}
		return null;
		return <TaskHeaderInternal name={this.props.taskData.name}><StateTaskControls /></TaskHeaderInternal>
	}
}

const mapPropsForMiddleEditorButtons = (currentState, ownProps) => {
	let runState = Shared.RunState.getRunState(currentState)
	return {
		runState
	}
}
const mapDispatchForMiddleEditorButtons = (dispatch, ownProps) => {
	return {
		onPlayAll : (resultsWindow) => {
			return dispatch((dispatch, getState) =>{
				let currentState= getState()
				const runState = Shared.RunState.getRunState(currentState)
				let currentTask = currentState['currentTask']
				let stepsToClear = Shared.TreeData.getAllStepsInTree(currentState, currentTask)
				let windowHandle = null
				const onRunResult = (stepCounter) => {
					const currentState = getState()
					const runResult = currentState.runResults[stepCounter]
					const stepData = currentState.steps[stepCounter]
						if (currentState.runningState.windowHandle) {
							currentState.runningState.windowHandle.postMessage({ runResult, 
							stepData})
						}
				}
				const start = () => {
					dispatch(State.getStartRunAction(stepsToClear, windowHandle))
					const currentState = getState()
					if (currentState.runningState.windowHandle) {
						currentState.runningState.windowHandle.postMessage({
							taskData: runState.currentTaskData,
						})
					}
					dispatch(steps.PlayAllThunkNoThrow(onRunResult)).then(() => {
						dispatch(State.getEndRunAction())
					})
				}
				if (resultsWindow) {
					windowHandle = window.open('/app/reports')
					const onLoad = (e) => {
						if (e.data.loaded) {
							start()
						}
						window.removeEventListener('message', onLoad)
					}
					window.addEventListener('message', onLoad)
				}
				else {
					start()
				}
			})
		},
		onSaveAll: () => {
			dispatch(steps.SaveAllThunk())
		},
		setCookieState : (key, val) => {
			return dispatch(State.getSetCookieStateAction(key, val))
		}
	}
}

const mapDispatchForHeader = (dispatch, ownProps) => {
	return {
		toggleSideMenu: () => {
			dispatch(State.getToggleSideMenu())
		}
	}
}
export const StateTaskHeader = connect(mapProps, mapDispatch)(TaskHeader)

class TaskControls extends React.Component {
	constructor(props) {
		super(props)
		this.onPlay = this.onPlay.bind(this)
		this.onSave = this.onSave.bind(this)
	}
	onPlay(resultsWindow) {
		this.props.onPlayAll(resultsWindow)
	}

	onSave() {
		this.props.onSaveAll()
	}
	render() {
		return null;
		const onClickMenu = (e) => {
			if (e.key == 'withResults') {
				this.onPlay(true)
			}
		}
		const menu = <Antd.Menu onClick={onClickMenu}>
			<Antd.Menu.Item key="withResults">
				With Results
				</Antd.Menu.Item>
		</Antd.Menu>
		return <span className='TaskControls'>
			{this.props.runState.currentTaskData.request == false &&
				<Antd.Dropdown.Button className='TaskControlButton PlayButton' onClick={() => { this.onPlay(false) }} overlay={menu}>
					Play
				</Antd.Dropdown.Button>
			}
		</span>
	}
}

export const StateTaskControls  = connect(mapPropsForMiddleEditorButtons, mapDispatchForMiddleEditorButtons)(TaskControls)

class SubmitFeedback extends React.Component {
	constructor(props){
		super(props)
	}
	submitFeedback = () => {
		//shell.openExternal("mailto:michael@structure.rest?subject=Structure Feedback...&body=");
	}
	render() {
		return <div onClick={this.submitFeedback}>Submit Feedback</div>
	}

}
