import React from 'react';
import { connect } from 'react-redux';
import classnames from 'classnames';
import PropTypes from 'prop-types';
import * as appPropTypes from './appPropTypes';
import * as stateActions from '../redux/stateActions';
import { Appear } from './transitions';

const Notifications = ({ notifications, onClick }) => {
	console.log("notifications", notifications);

	return (
		<div data-component='Notifications' style={{
			width: '383px',
			background: '#F6F7F9',
			borderRadius: '8px',
			margin: '48px 30px 19px 0px'
		}}>
			<div className='chatTitle'>聊天</div>

			<div className='chatwarp'>
				{
					notifications.map((notification) => {
						return (
							<div key={notification.id} style={{ padding: '0 20px', fontSize: '14px' }}>
								{
									// 类型是否是用户发送的消息
									notification.type == 'userMessage' ?
										<div style={{marginTop: 36}}>
											{
												notification.isMe ?
													<div style={{ display: 'flex', flexDirection: 'row-reverse', flexWrap: 'wrap' }}>
														<div style={{ color: '#232B40', marginBottom: 10, width: '100%', textAlign: 'right' }}>我</div>
														<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#CDD8F1', borderRadius: '8px 0px 8px 8px' }}>
															{notification.text}
														</div>
													</div> :
													<>
														<div style={{ color: '#232B40', marginBottom: 10 }}>用户-{notification.id}</div>
														<div style={{ width: 'max-content', padding: '10px 20px', color: '#434D6C', lineHeight: '26px', background: '#fff', borderRadius: '0px 8px 8px 8px' }}>
															{notification.text}
														</div>
													</>
											}
										</div> :
										<div style={{width: '100%', margin: '20px 0', textAlign: 'center'}}>
											{notification.text}
										</div>
								}

							</div>


							// 信息提示动画
							// <Appear key={notification.id} duration={250}>
							// 	<div
							// 		className={classnames('notification', notification.type)}
							// 		onClick={() => onClick(notification.id)}
							// 	>
							// 		<div className='icon' />

							// 		<div className='body'>
							// 			<If condition={notification.title}>
							// 				<p className='title'>{notification.title}</p>
							// 			</If>

							// 			<p className='text'>{notification.text}</p>
							// 		</div>
							// 	</div>
							// </Appear>
						);
					})
				}
			</div>
		</div>
	);
};

Notifications.propTypes =
{
	notifications: PropTypes.arrayOf(appPropTypes.Notification).isRequired,
	onClick: PropTypes.func.isRequired
};

const mapStateToProps = (state) => {
	const { notifications } = state;

	return { notifications };
};

const mapDispatchToProps = (dispatch) => {
	return {
		onClick: (notificationId) => {
			dispatch(stateActions.removeNotification(notificationId));
		}
	};
};

const NotificationsContainer = connect(
	mapStateToProps,
	mapDispatchToProps
)(Notifications);

export default NotificationsContainer;