import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaDatePicker,
	WeaInputSearch,
} from 'ecCom';

import Tab from './Tab';
import Annotation from './Annotation';

@inject('hrmHolidySettingNew')
@observer
class ConditionGroup extends React.Component {
	constructor(props) {
		super(props);
	}

	getLeftlayout = () => {
		const {
			datePicker,
			datePickerProps
		} = this.props.hrmHolidySettingNew;

		const leftlayout = (
			<div>
				<div className='hrm-holiday-tab'>
					<Tab ecId={`${this && this.props && this.props.ecId || ''}_Tab@zd0bq8`} />
				</div>
				<div className='hrm-holiday-tab'>
					<WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@wlxerf`} {...datePickerProps} {...datePicker}/>
				</div>
			</div>
		)

		return leftlayout;
	}

	getRightlayout = () => {
		const {
			tab,
			inputSearch,
			inputSearchProps,
		} = this.props.hrmHolidySettingNew, {
			selectedKey
		} = tab;

		let rightlayout;

		if (selectedKey === '0') {
			return (
				<div className='hrm-holiday-count'>
					<Annotation ecId={`${this && this.props && this.props.ecId || ''}_Annotation@c9v5qv`} />
				</div>
			)
		} else {
			return (
				<WeaInputSearch ecId={`${this && this.props && this.props.ecId || ''}_WeaInputSearch@knxtnx`} {...inputSearch} {...inputSearchProps}/>
			)
		}
	}

	render() {
		return (
			<div className='hrm-holiday-condition-group'>
				{this.getLeftlayout()}
				{this.getRightlayout()}
			</div>
		);
	}
}

export default ConditionGroup;