import {
	inject,
	observer,
} from 'mobx-react'
import {
	toJS
} from 'mobx';
import {
	WeaCascader,
	WeaTextarea,
} from 'ecCom'
import {
	Spin,
	message,
} from 'antd'
import {
	i18n
} from '../../public/i18n';

import TextAreaCopy from './TextAreaCopy';

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


	componentWillUnmount() {
		this.props.hrmSalaryItemsSet.refreshCalculatorCopy();
	}

	getClassName = (index) => {
		let cn = 'hrm-calculator-item'

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

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

		return cn;
	}

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

		// const lastKey = valuesSub[valuesSub.length - 1];

		// if (!lastKey) {
		// 	message.warning(i18n.message.logicWrong());
		// 	return
		// }

		if (index !== 17) {
			this.insert(item)
		} else {
			popItem('sub');
		}
	}

	insert = (item) => {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			pushItem,
			textArea,
		} = hrmSalaryItemsSet, {
			pageShowItemsSub
		} = textArea;

		let temp;
		if (item == '×') {
			temp = '*';
		} else if (item == '÷') {
			temp = '/';
		} else {
			temp = item;
		}

		pushItem(temp, '', 'sub');

	}

	render() {
		const {
			hrmSalaryItemsSet
		} = this.props, {
			calculator,
			changeCascaderValue
		} = hrmSalaryItemsSet, {
			compPropsSub,
			valuesSub,
			loading,
		} = calculator;

		let items = this.formulaItems;

		if (loading) {
			return (
				<div className='hrm-loading-center-small'>
                    <Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@bpwmxl`} spinning={loading}></Spin>
                </div>
			)
		} else {
			return (
				<div>
					<div className='hrm-salary-cascader'>
						<WeaCascader ecId={`${this && this.props && this.props.ecId || ''}_WeaCascader@vlov2q`} compDef={toJS(compPropsSub)} values={toJS(valuesSub)} onChange={cb => changeCascaderValue(cb, 'sub')}/>
					</div>
					<div className='hrm-salary-calculator'>
						<div className='hrm-salary-textarea'>
							<TextAreaCopy ecId={`${this && this.props && this.props.ecId || ''}_TextAreaCopy@y2dxhu`} />
						</div>
						<div className='hrm-calculator-wrapper'>
							{items.map( (item, index) => {
								return <div className={this.getClassName(index)} onClick={() => this.clickKeyboard(item, index)}>{item}</div>
							})}
						</div>
					</div>
				</div>
			)
		}

	}
}