import {
	inject,
	observer,
} from 'mobx-react'
import {
	WeaFormItem,
	WeaRightMenu,
	WeaSelect,
} from 'ecCom'
import {
	i18n
} from '../../public/i18n';

@inject('hrmWorkHour')
@observer
export default class FormInfo extends React.Component {
	constructor(props) {
		super(props);
	}

	componentWillUnmount() {
		const {
			hrmWorkHour
		} = this.props, {
			resetSelectInfo
		} = hrmWorkHour;

		resetSelectInfo();
	}

	getDropMenuDatas = () => {
		const {
			hrmWorkHour
		} = this.props, {
			formInfo
		} = hrmWorkHour, {
			loading
		} = formInfo;

		const menu = [{
			key: '0',
			icon: <i className='icon-coms-Preservation' />,
			content: i18n.button.save(),
			disabled: loading,
		}];

		return menu
	}

	handleMenuClick = (key) => {
		const {
			hrmWorkHour,
		} = this.props, {
			closeDialog,
			synchro,
		} = hrmWorkHour;

		if (key == '0') {
			closeDialog();
			synchro();
		}
	}

	getForm = () => {
		const {
			hrmWorkHour
		} = this.props, {
			selectCom,
			setSelectDateIndex
		} = hrmWorkHour, {
			selectedValue
		} = selectCom;

		const options = [{
			key: "0",
			selected: false,
			showname: i18n.label.monday(),
		}, {
			key: "1",
			selected: false,
			showname: i18n.label.tuesday(),
		}, {
			key: "2",
			selected: false,
			showname: i18n.label.wednesday(),
		}, {
			key: "3",
			selected: false,
			showname: i18n.label.thursday(),
		}, {
			key: "4",
			selected: false,
			showname: i18n.label.friday(),
		}, {
			key: "5",
			selected: false,
			showname: i18n.label.saturday(),
		}, {
			key: "6",
			selected: false,
			showname: i18n.label.sunday(),
		}]
		return (
			<WeaFormItem ecId={`${this && this.props && this.props.ecId || ''}_WeaFormItem@syncb1`}
            	label={i18n.label.pleaseSelectTime()}
            	labelCol={{span: 8, offset: 1}}
            	wrapperCol={{span: 12}}
          	>
            	<WeaSelect ecId={`${this && this.props && this.props.ecId || ''}_WeaSelect@w8mptp`} options={options} value={selectedValue} onChange={key => setSelectDateIndex(key)}/>
         	 </WeaFormItem>
		)
	}

	render() {
		return (
			<WeaRightMenu ecId={`${this && this.props && this.props.ecId || ''}_WeaRightMenu@ig1ako`} datas={this.getDropMenuDatas()} onClick={ key => this.handleMenuClick(key)}>
              	<div className='hrm-dialog-form'>
              	    {this.getForm()}
              	</div>
            </WeaRightMenu>
		)

	}
}