import {
	observer,
	inject
} from 'mobx-react';
import {
	toJS
} from 'mobx';
import {
	WeaYear,
	WeaNewScroll,
	WeaLocaleProvider,
} from 'ecCom';
import {
	Tooltip,
	Spin,
} from 'antd';
import {
	Loading,
} from '../../public/learn';
const getLabel = WeaLocaleProvider.getLabel;

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

	yearDateCellRender = (_date) => {
		const {
			calendar
		} = this.props.hrmHolidySettingNew;

		const year = _date.getYear(),
			month = _date.getMonth() + 1,
			day = _date.getDayOfMonth();

		const item = toJS(calendar)[month - 1][day - 1];

		if (!item) {
			return null;
		}

		const {
			date,
			bgColor,
			changeType,
			typeName,
			fontColor,
			desc,
		} = item;

		const yearOfItem = (date || '').length >= 4 ? date.substring(0,4) : '' ;
		if(year != yearOfItem){
			return null ;
		}

		if (bgColor) {
			const className = `linear-gradient-${['#00CC66','#FF0000','#0066FF'].findIndex(color => color === bgColor)}`;

			const params = {
				date,
				desc,
				typeName
			};
			return (
				<Tooltip ecId={`${this && this.props && this.props.ecId || ''}_Tooltip@ei8y41`} placement="right" title={this.getTooltip(params)}>
					<div style={{backgroundColor:bgColor,color:fontColor}} className={className} title=''>
		      			{day}
		    		</div>
	    		</Tooltip>
			)
		} else {
			return (
				<div style={{color:fontColor}}>
	      			{day}
	    		</div>
			)
		}
	}

	getTooltip = (params) => {
		const labels = [getLabel('22823', "日期"), getLabel('25734', "说明"), getLabel('505579', "类型")];

		const values = Object.values(params);

		return (
			<ul>{
				labels.map( (label,index) => {
					return <li>{`${label}: ${values[index]}`}</li>
				})
			}</ul>
		)
	}

	render() {
		const {
			year,
			yearProps,
			isyearloaded,
		} = this.props.hrmHolidySettingNew, {
			loading
		} = year;

		if (isyearloaded) {
			return (
				<WeaNewScroll ecId={`${this && this.props && this.props.ecId || ''}_WeaNewScroll@kr5vfg`} height={'100%'}>
					<Spin ecId={`${this && this.props && this.props.ecId || ''}_Spin@xxcmhk`} spinning={loading}>
						<WeaYear ecId={`${this && this.props && this.props.ecId || ''}_WeaYear@lo8xaz`} 
							{...year} 
							{...yearProps}
							dateCellRender={date => this.yearDateCellRender(date)}
						/>
					</Spin>
				</WeaNewScroll>
			)
		} else {
			return <Loading ecId={`${this && this.props && this.props.ecId || ''}_Loading@3oc2iy`} size='mid'/>
		}
	}
}

export default Year