import React, {
	Component
} from 'react';
import {
	observer
} from 'mobx-react';
import {
	WeaDatePicker
} from 'ecCom';
import {
	Button
} from 'antd';
import {
	i18n
} from '../../public/i18n';
import classnames from 'classnames';

@observer
export default class DateSwitch extends Component {
	constructor(props) {
		super(props);
	}

	componentDidMount() {}

	componentWillReceiveProps(nextProps) {}

	render() {
		const {
			store
		} = this.props;
		const {
			displayType,
			currDate,
			changeView,
			onDateChange
		} = store;

		const calendar = classnames({
			['calendar']: true,
			['active']: displayType === 'calendar'
		})
		const list = classnames({
			['list']: true,
			['active']: displayType === 'detailList'
		})

		return (
			<div className='dateSwitch'>
				<div className={calendar} onClick={() => changeView('calendar')}>{i18n.label.calendar()}</div>
				<div className={list} onClick={() => changeView('detailList')}>{i18n.label.detailList()}</div>
				<WeaDatePicker ecId={`${this && this.props && this.props.ecId || ''}_WeaDatePicker@d6lhej`}
		          arrow
		          type="year"
		          style={{marginRight: 10}}
		          date={currDate}
		          onChange={value => onDateChange(value)}
		        />
		        <Button ecId={`${this && this.props && this.props.ecId || ''}_Button@qms58w`} type='primary' onClick={() => onDateChange(new Date())}>{i18n.label.tsyr()}</Button>
			</div>
		)
	}
}