import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx';
import {
	WeaCascader,
	WeaTextarea,
} from 'ecCom'

import TextArea from './TextArea';

@inject('hrmSalaryItemsSet')
@observer
export default class Condition extends React.Component {
	constructor(props) {
		super(props);
		this.conditionItems = ['7', '8', '9', '<', '>', '4', '5', '6', '≤', '≥', '1', '2', '3', '&', '||', '0', '.', '←', '='];
		this.formulaItems = ['7', '8', '9', '+', '-', '4', '5', '6', '×', '÷', '1', '2', '3', '(', ')', '0', '.', '←', '='];
	}

	componentWillUnmount() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			refreshEditor
		} = hrmSalaryItemsSet;

		refreshEditor();
	}

	getClassName = (index) => {
		let cn = 'hrm-salary-item-set-input-item'

		if ((index < 15) && ((index + 2) % 5 == 0 || (index + 1) % 5 == 0)) {
			cn = `${cn} hrm-input-item-special`;
		}

		if (index == 14) {
			cn = `${cn} hrm-input-item-or`
		}
		if (index == 16) {
			cn = `${cn} hrm-input-item-dot`
		}
		if (index == 17) {
			cn = `${cn} hrm-input-item-arrow`
		}
		if (index == 18) {
			cn = `${cn} hrm-input-item-equal`
		}

		return cn;
	}

	clickKeyboard = (item, index) => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			pushItem,
			popItem,
		} = hrmSalaryItemsSet;

		if (index !== 17) {
			pushItem(item);
		} else {
			popItem();
		}
	}


	render() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			condition,
			subDialog,
			changeCascaderValue
		} = hrmSalaryItemsSet, {
			compProps,
			values,
		} = condition, {
			type
		} = subDialog;

		let items = (type == 'cd') ? this.conditionItems : this.formulaItems;

		return (
			<div>
				<div className='hrm-salary-item-set-cascader'>
					{compProps && <WeaCascader compDef={toJS(compProps)} values={toJS(values)} onChange={cb => changeCascaderValue(cb)}/>}
				</div>
				<div className='hrm-salary-item-set-formula'>
					<div className='hrm-salary-item-set-textarea'>
						<TextArea />
					</div>
					<div className='hrm-salary-item-set-input'>
						{items.map( (item, index) => {
							return <div className={this.getClassName(index)} onClick={() => this.clickKeyboard(item, index)}>{item}</div>
						})}
					</div>
				</div>
			</div>
		)
	}
}