import {
	WeaDialog
} from 'ecCom';
import {
	observer
} from 'mobx-react';
import AbsenceBrief from './AbsenceBrief';
import Type from './Type';
import Timeline from './Timeline';
import {
	Loading
} from '../../public/learn';

@observer
export default class Dialog extends React.Component {
	constructor(props) {
		super(props);
	}

	render() {
		const {
			store
		} = this.props, {
			ABSENCEDIALOG,
			absenceDialog,
			absenceDetail,
			dialogHeight,
		} = store, {
			absenceDay,
			types,
			details,
		} = absenceDetail, {
			loading
		} = absenceDialog;

		let c;
		if (loading) {
			c = <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@c3b4zp`} />
		} else {
			c = (
				<div className='absence'>
					<AbsenceBrief ecId={`${this && this.props && this.props.ecId || ''}_AbsenceBrief@686tr0`} absenceDay={absenceDay}/>
					<Type ecId={`${this && this.props && this.props.ecId || ''}_Type@rdm790`} types={types}/>
					<Timeline ecId={`${this && this.props && this.props.ecId || ''}_Timeline@e4buy4`} details={details} scrollY={dialogHeight}/>
				</div>
			)
		}
		return (
			<WeaDialog ecId={`${this && this.props && this.props.ecId || ''}_WeaDialog@orha4a`}
				{...ABSENCEDIALOG}
				{...absenceDialog}
			>
				{c}
			</WeaDialog>
		);
	}
}