import React, { Component } from 'react';
import InGameActions from '../../actions/InGameActions';
import BorderButton from '../../components/BorderButton';
import Dropdown from '../../components/Dropdown';
import Slidein from '../../components/Slidein';
import TextField from '../../components/TextField';

export default class InGameEdit extends Component {
	
	static propTypes = {
		editCast: React.PropTypes.string.isRequired,
		editDuplicate: React.PropTypes.string.isRequired,
		editIndex: React.PropTypes.number.isRequired,
		fighters: React.PropTypes.array.isRequired
	};

	editValue = (tag, event) => InGameActions.editValue(tag, event.target.value);
	editValueDropdown = (tag, value) => InGameActions.editValue(tag, value);
	activateFighter = () => InGameActions.activateFighter();
	deactivateFighter = () => InGameActions.deactivateFighter();
	editCast = event => InGameActions.editCast(event.target.value);
	editDuplicate = event => InGameActions.editDuplicate(event.target.value);
	cast = () => InGameActions.cast();
	stopCast = () => InGameActions.stopCast();
	duplicateFighter = () => InGameActions.duplicateFighter();
	removeFighter = () => InGameActions.removeFighter();
	closeEdit = () => InGameActions.closeEdit();
	
	render() {
		return (
			<Slidein isOpen={this.props.editIndex > -1} close={this.closeEdit}>
				{
					this.props.editIndex > -1 ? (
						<div className="edit-inner">
							<div className="edit-main">
								<TextField
									labelText="Name"
									value={this.props.fighters[this.props.editIndex].name}
									onChange={this.editValue.bind(null, 'name')}
								/>
								<Dropdown
									label="Gesinnung"
									value={this.props.fighters[this.props.editIndex].type}
									onChange={this.editValueDropdown.bind(null, 'type')}
									options={[['Held', 'h'], ['Verbündeter', 'v'], ['Feind', 'f']]}
								/>
								<TextField
									labelText="Aktionsmodifikator"
									value={this.props.fighters[this.props.editIndex].aktm}
									onChange={this.editValue.bind(null, 'aktm')}
								/>
								<TextField
									labelText="Verbrauchte Aktionen"
									value={this.props.fighters[this.props.editIndex].aktv}
									onChange={this.editValue.bind(null, 'aktv')}
								/>
								<TextField
									labelText="Verbrauchte Freie Aktionen"
									value={this.props.fighters[this.props.editIndex].faktv}
									onChange={this.editValue.bind(null, 'faktv')}
								/>
							</div>
							<div className="edit-health">
								<TextField
									labelText="INI"
									value={this.props.fighters[this.props.editIndex].init}
									onChange={this.editValue.bind(null, 'init')}
								/>
								<TextField
									labelText="IB"
									value={this.props.fighters[this.props.editIndex].ib}
									onChange={this.editValue.bind(null, 'ib')}
								/>
								<TextField
									labelText="LeP"
									value={this.props.fighters[this.props.editIndex].lec}
									onChange={this.editValue.bind(null, 'lec')}
								/>
								<TextField
									labelText="LE"
									value={this.props.fighters[this.props.editIndex].le}
									onChange={this.editValue.bind(null, 'le')}
								/>
								<TextField
									labelText="AuP"
									value={this.props.fighters[this.props.editIndex].auc}
									onChange={this.editValue.bind(null, 'auc')}
								/>
								<TextField
									labelText="AU"
									value={this.props.fighters[this.props.editIndex].au}
									onChange={this.editValue.bind(null, 'au')}
								/>
								<TextField
									labelText="AsP"
									value={this.props.fighters[this.props.editIndex].aec}
									onChange={this.editValue.bind(null, 'aec')}
								/>
								<TextField
									labelText="AE"
									value={this.props.fighters[this.props.editIndex].ae}
									onChange={this.editValue.bind(null, 'ae')}
								/>
								<TextField
									labelText="KaP"
									value={this.props.fighters[this.props.editIndex].kec}
									onChange={this.editValue.bind(null, 'kec')}
								/>
								<TextField
									labelText="KE"
									value={this.props.fighters[this.props.editIndex].ke}
									onChange={this.editValue.bind(null, 'ke')}
								/>
							</div>
							<div className="edit-options">
								{
									this.props.fighters[this.props.editIndex].deac ? (
										<BorderButton label="Aktivieren" onClick={this.activateFighter} />
									) : (
										<BorderButton label="Deaktivieren" onClick={this.deactivateFighter} />
									)
								}
								<TextField
									hint="Aktion(en) über Zeit"
									value={this.props.editCast}
									onChange={this.editCast}
								/>
								<BorderButton label="Aktionen über Zeit addieren" onClick={this.cast} />
								<BorderButton label="Aktion über Zeit abbrechen" onClick={this.stopCast} />
								<TextField
									hint="Duplikate"
									value={this.props.editDuplicate}
									onChange={this.editDuplicate}
								/>
								<BorderButton label="Kämpfer duplizieren" onClick={this.duplicateFighter} />
								<BorderButton label="Kämpfer entfernen" onClick={this.removeFighter} />
							</div>
						</div>
					) : null
				}
			</Slidein>
		);
	}
}
