import React, { useRef, useEffect } from 'react';
import { connect } from 'react-redux';
import PropTypes from 'prop-types';
import * as appPropTypes from './appPropTypes';
import * as stateActions from '../redux/stateActions';

const Notifications = ({ notifications, onClick }) => {
    const chatwarpRef = useRef(null);

    useEffect(() => {
        if (chatwarpRef.current) {
            chatwarpRef.current.scrollTop = chatwarpRef.current.scrollHeight;
        }
    }, [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' ref={chatwarpRef}>
                {
                    notifications.map((notification) => (
                        <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: '30px 0', textAlign: 'center'}}>
                                        {notification.text}
                                    </div>
                            }
                        </div>
                    ))
                }
            </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;