import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaDialog,
} from 'ecCom';
import {
	NoData,
	Loading,
} from '../../public/learn';
import DialogTab from './DialogTab';
import DialogBalance from './DialogBalance';
import DialogSelect from './DialogSelect';
import DialogTimeline from './DialogTimeline';
import DialogPagination from './DialogPagination';

const BottomTips = props => {
	const {
		tip
	} = props;

	return (
		<div className='report-bottomTip'>{tip}</div>
	)
}

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

	getDialogContent = () => {
		const {
			hrmVacationBalanceReportCopy
		} = this.props;

		const {
			dialog,
			dialogPagination,
		} = hrmVacationBalanceReportCopy, {
			total
		} = dialogPagination, {
			loading
		} = dialog;

		if (loading) {
			return <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@kfi0uh`} size='sm' />
		}

		if (total > 0) {
			return (
				<div className='content'>
					<DialogTimeline ecId={`${this && this.props && this.props.ecId || ''}_DialogTimeline@lmcikv`} />
					<DialogPagination ecId={`${this && this.props && this.props.ecId || ''}_DialogPagination@fp670b`} />
				</div>
			)
		} else {
			return <NoData ecId={`${this && this.props && this.props.ecId || ''}_NoData@rfthkb`} />
		}
	}

	render() {
		const {
			hrmVacationBalanceReportCopy: store
		} = this.props;

		const {
			dialog,
			dialogTitle,
			dialogProps,
		} = store, {
			visible,
			bottomTips,
		} = dialog;

		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@nqcofm`}
				{...dialogProps}
				title={dialogTitle}
				visible={visible}
			>
				<DialogTab ecId={`${this && this.props && this.props.ecId || ''}_DialogTab@7bhofd`} />
				<div style={{height: 40, borderBottom: '1px solid #EEE' }}>
					<DialogBalance ecId={`${this && this.props && this.props.ecId || ''}_DialogBalance@peynuw`} />
					<DialogSelect ecId={`${this && this.props && this.props.ecId || ''}_DialogSelect@7egm19`} />	
				</div>
				{this.getDialogContent()}
				<BottomTips ecId={`${this && this.props && this.props.ecId || ''}_BottomTips@u9r9sp`} tip={bottomTips}/>
			</WeaDialog>
		);
	}
}

export default Dialog;