import React from 'react';
import Fluky from 'fluky';
var DropTarget = require('react-dnd').DropTarget;

var ItemTypes = {
	group: 'digital'
};

var panelTarget = {
	canDrop: function (props, monitor) {
		// You can disallow drop based on props or item
		var item = monitor.getItem();
		var pins = item.pins;
		var pin = props.pin;
		var canDrop = pins.indexOf(pin);

		var blockPins = Fluky.getState('WorkBoard').blockPins;
		if (blockPins[pin]) {
			return false;
		}
		if (item.usePorts) {
			var usedPorts = item.usePorts(pin);

			for (var index in usedPorts) {
				var pinName = usedPorts[index];
				
				if (blockPins[pinName]) {
					return false;
				}
			}
		}

		if (props.board == 'baseShieldGrove') {
			canDrop = 1;
		}

		return (canDrop !== -1) ;
	},
	drop(props, monitor, component) {
		var item = monitor.getItem();
		var blocked = [];
/*
		component.setState({
			'hasDropped': true,
			'component': {
				'name': item.name,
				'sku': item.sku,
				'color': item.color,
				'border': item.border,
				'image': item.image,
				'usePorts': item.usePorts
			}
		});
*/
		// 三轴数字加速度传感器
		if (item.sku === 101020054 && props.board != 'baseShieldGrove') {
			Fluky.dispatch('action.WorkBoard.displayModule', item.sku, true);
		}

		blocked.push(props.pin);
		Fluky.dispatch('action.WorkBoard.addBlockPin', blocked);

		if (item.usePorts) {
			blocked = item.usePorts(props.pin);

			if (blocked.length) {
				Fluky.dispatch('action.WorkBoard.addBlockPin', blocked);
			}
		}

		return { 'name': item.name, 'pin': props.pin};
	}
};

function collect(connect, monitor) {
	return {
		connectDropTarget: connect.dropTarget(),
		isOver: monitor.isOver(),
		canDrop: monitor.canDrop(),
	    itemType: monitor.getItemType()
	};
}

class Panel extends React.Component {
	constructor(props) {
		super(props);
		this.state = {
			hasDropped: false
		};
	}

	removeItem() {
//		var dropedSku = this.state.component.sku;
		var dropedPin = this.props.pin;
		var dropedSku = this.props.module[dropedPin].sku;
//		var usePorts = this.state.component.usePorts;
		var usePorts = this.props.module[dropedPin].usePorts;
		var blocked = [];

		this.setState({hasDropped: false});

		Fluky.dispatch('action.WorkBoard.disconnectModule', dropedSku, dropedPin);
		Fluky.dispatch('action.Tips.clearTips');
		
		// 三轴数字加速度传感器
		if (dropedSku === 101020054) {
			Fluky.dispatch('action.WorkBoard.displayModule', dropedSku, false);
		}

		blocked.push(dropedPin);
		Fluky.dispatch('action.WorkBoard.removeBlockPin', blocked);

		if (usePorts) {
			blocked = usePorts(dropedPin);
			if (blocked.length) {
				Fluky.dispatch('action.WorkBoard.removeBlockPin', blocked);
			}
		}
	}

	render() {
		var { canDrop, isOver, connectDropTarget } = this.props;
		var { hasDropped } = this.state;

		var pin = this.props.pin;

		var accepts = this.props.accepts;
//		var lastDroppedItem = this.state.component;
		var lastDroppedItem = this.props.module[pin] || null;
		
		hasDropped = lastDroppedItem ? true : false;

		var borderColor = null;

		var isActive = canDrop && isOver;
		var backgroundColor = '#FAFAFA';
		
		if (isActive) {
			backgroundColor = '#FFC107';
		} else if (canDrop) {
			backgroundColor = '#b0bec5';
		}

		var showComponent;
		if (hasDropped) {

			// Status
			var curStatus = [ '', '', '' ];
			var index = 0;

			for (var name in this.props.status) {
				curStatus[index] = name + ': ' + this.props.status[name];

				index++;
			}
			showComponent = <div className={'item drop-component ' + lastDroppedItem.border }>
				<div className={'row'}>
					<div className={'col s6'}>
						<img src={ lastDroppedItem.image } />
						<p className="item-name">{ lastDroppedItem.name }</p>
					</div>
					<div className={'col s6'}>
						<p>{ pin }</p>
						<p className="item-value">{curStatus[0]}</p>
						<a className="remove-btn" href="#" onClick={ this.removeItem.bind(this) }>移除</a>
					</div>
				</div>
				<div className="show-connect">
					<div className={ 'square-top ' + lastDroppedItem.color + ' ' + pin + '-top' }></div>
					<div className={ 'square-middle ' + lastDroppedItem.color + ' ' + pin + '-middle' }></div>
					<div className={ 'square-bottom ' + lastDroppedItem.color + ' ' + pin + '-bottom' }></div>
				</div>
			</div>;

			if (this.props.board == 'baseShieldGrove' && this.props.show) {
				var name = 'Input';
				if (pin == 'I2C2') {
					name = 'Output';
				}
				showComponent = <div className={'item drop-component ' + lastDroppedItem.border }>
					<div className={'row'}>
						<div className={'col s6'}>
							<img src={ lastDroppedItem.image } />
							<p className="item-name">{ lastDroppedItem.name }</p>
						</div>
						<div className={'col s6'}>
							<p>{ name }</p>
							<p className="item-value">{curStatus[0]}</p>
							<a className="remove-btn" href="#" onClick={ this.removeItem.bind(this) }>移除</a>
						</div>
					</div>
				</div>;
			}
		} else {
			showComponent = <div className={ 'item' } style={{ backgroundColor }}>
				<p className="pin-name">{ pin }</p>
				{ isActive ?
				<i className={ 'medium material-icons done center-block' }>done</i> :
				<i className={ 'medium material-icons drop center-block' }>play_for_work</i> }
			</div>;

			if (this.props.board == 'baseShieldGrove' && this.props.show) {
				var name = 'Input';
				if (pin == 'I2C2') {
					name = 'Output';
				}
				showComponent = <div className={ 'item' } style={{ backgroundColor }}>
					<p className="pin-name">{ name }</p>
					{ isActive ?
					<i className={ 'medium material-icons done center-block' }>done</i> :
					<i className={ 'medium material-icons drop center-block' }>play_for_work</i> }
				</div>;
			}

			if(this.props.board == 'baseShieldGrove' && !this.props.show) {
				showComponent = null;
			}
		}

		return connectDropTarget(
			<div>
				{ showComponent }
			</div>
		);
	}
};

module.exports = DropTarget(ItemTypes.group, panelTarget, collect)(Panel);
