import {
	inject,
	observer
} from 'mobx-react';
import {
	WeaHelpfulTip,
	WeaLocaleProvider,
} from 'ecCom';
import {
	Icon
} from '../../public/learn';
const getLabel = WeaLocaleProvider.getLabel;

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

	render() {
		const {
			summary,
			colorIconProps,
			hasHelpfulTip,
			helpfulTipProps,
			handleIconClick,
		} = this.props.hrmHolidySettingNew, {
			annotations,
			iconStates
		} = summary;

		return (
			<div>{
				annotations.map( (annotation,index) => {
					const {
						changeType,
						bgColor,
						typeName,
						value
					} = annotation;

					const enhanceIconProps = {
						...colorIconProps,
						bgColor,
						className:`linear-gradient-${index}`,
						iconState: iconStates[index],
						onIconClick: (value) => handleIconClick(value, index)
					}

					return (
						<div key={changeType} className='hrm-holiday-count-item'>
							<div className='hrm-holiday-color-icon'>
								<Icon ecId={`${this && this.props && this.props.ecId || ''}_Icon@g0evc6@${index}`} {...enhanceIconProps}/>
							</div>
							<span>
								{`${typeName} : `} <b>{value}</b> {`${getLabel('505553',"天")}`}
							</span>
						</div>
					)
				})
			}{
				hasHelpfulTip && <WeaHelpfulTip ecId={`${this && this.props && this.props.ecId || ''}_WeaHelpfulTip@zfrt61`} {...helpfulTipProps} />
			}</div>
		)
	}
}

export default Annotation