import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaBrowser
} from 'ecCom';
import {
	Row,
	Popover,
	Button
} from 'antd';
import {
	i18n
} from '../../public/i18n';
import {
	has
} from 'lodash';
import classnames from 'classnames';

export default class Screen extends Component {
	constructor(props) {
		super(props);
		this.state = {
			visible: false,
			screen: false,
			screenObj: null,
			replaceDatas: []
		}
	}

	componentDidMount() {
		const {
			replaceDatas,
			col
		} = this.props;
		if (replaceDatas != null) {
			this.setState({
				screen: true,
				replaceDatas
			})
		}
	}

	componentWillReceiveProps(nextProps) {
		const {
			replaceDatas,
			col
		} = nextProps;
		this.setState({
			screen: replaceDatas != null,
			replaceDatas
		})
	}

	handleVisibleChange = (visible) => {
		setTimeout(() => {
			if(this.state.onBrowserChanged){
				this.setState({onBrowserChanged: false});
			}else{
				this.setState({visible, onBrowserChanged: false})
			}
		}, 300);

		// if(!this.state.visible || this.state.onBrowserChanged)
		// 	this.setState({visible, onBrowserChanged: false})
		// else{
		// 	// this.setState({onBrowserChanged: false});
		// }
		// this.setState({
		// 	visible
		// })
	}

	resetScreen = () => {
		this.setState({
			screen: false,
			visible: false,
			screenObj: null,
			replaceDatas: []
		})
		this.props.resetScreen && this.props.resetScreen(this.props.col.dataIndex);
	}

	onBrowserChange = (ids, names, datas) => {
		this.setState({
			screen: ids.length != 0 && ids != '',
			screenObj: {
				[this.props.col.dataIndex]: {
					id: ids
				}
			},
			replaceDatas: (ids.length == 0 ? null : datas),
			visible: true,
			onBrowserChanged: true
		})
	}

	doScreen = () => {
		this.setState({
			visible: false
		})
		this.props.doScreen && this.props.doScreen(this.props.col.dataIndex, this.state);
	}

	setBrowserRef = ref => {
		if(ref){
			const monitor = setInterval(() => {
				const {browser} = ref;
				const {state} = browser || {};
				const {visible} = state || {};
				if(visible){
					this.setState({visible: false});
					clearInterval(monitor);
				}
			}, 50)
		}
	}

	render() {
		const {
			col
		} = this.props;

		const browserCom = col.screencoms || col.coms;
		const browserConditionParam = browserCom.browserConditionParam;

		const content = (
			<div className='screenContent'>
				<div>{i18n.label.screenInfo()}</div>
				<WeaBrowser ecId={`${this && this.props && this.props.ecId || ''}_WeaBrowser@4dyfh0`} {...browserConditionParam} ref={ref => this.setBrowserRef(ref)} replaceDatas={this.state.replaceDatas} onChange={this.onBrowserChange}/>
				<div className='btn'>
					<Button ecId={`${this && this.props && this.props.ecId || ''}_Button@squ84j`} type='primary' onClick={this.doScreen}>{i18n.button.ok()}</Button>
				</div>
			</div>
		)
		const title = (
			<div className='clearScreen' onClick={this.resetScreen}>
				<span className='icon-coms-Reset'><span style={{paddingLeft: '10px'}}>{i18n.button.clearScreen()}</span></span>
			</div>
		)
		const classname = classnames({
			['screen']: true,
			['icon-coms-screen']: !this.state.screen,
			['icon-coms-screen2']: this.state.screen
		})
		return (
			<Popover ecId={`${this && this.props && this.props.ecId || ''}_Popover@cbqex7`} placement="bottomRight" content={content} title={title} trigger="click"
		    	visible={this.state.visible} onVisibleChange={this.handleVisibleChange}
		    >
		    	<i className={classname} title={i18n.label.screen()}></i>
		    </Popover>
		)
	}
}