import * as React from 'react';
import {inject, observer} from 'mobx-react';
import PropTypes from 'prop-types';
import classNames from 'classnames';
import {reaction} from 'mobx';
import Icon from '../Icon';
import moment from 'moment';
import './styles.scss';

@inject('notificationsStore')
@observer
class NotificationsBell extends React.Component {
    constructor(props) {
        super(props);
        this.store = this.props.notificationsStore;
        this.state = {
            isPanelVisible: false,
        };

        reaction(() => this.store.unreadMessagesCount,
            () => {
                if (this.state.isPanelVisible) {
                    this.store.markAsRead();
                }
            });
    }

    componentDidMount() {
        document.body.addEventListener('click', this.bodyClickHandler);
    }

    componentWillUnmount() {
        document.body.removeEventListener('click', this.bodyClickHandler);
    }

    bodyClickHandler = (e) => {
        if (this.state.isPanelVisible && !this.ref.contains(e.target)) {
            this.togglePanel();
        }
    };

    togglePanel() {
        if (!this.state.isPanelVisible) {
            window.setTimeout(() => {
                this.store.markAsRead();
            }, 2000);
        }

        this.setState({
            isPanelVisible: !this.state.isPanelVisible,
        });
    }

    render() {
        const messages = this.store.messages && this.store.messages.map((msg) => {
            const messageClasses = classNames('NotificationsBell__message',
                {
                    'NotificationsBell__message--unread': !msg.read,
                });
            return (
                <div
                    className={messageClasses}
                    key={msg.id}
                >
                    <div className="NotificationsBell__message__title">
                        {msg.title}
                    </div>
                    <div
                        className="NotificationsBell__message__body"
                        dangerouslySetInnerHTML={{__html: msg.shortContent}}
                    />
                    {msg.dateFrom && (
                        <div className="NotificationsBell__message__date">
                            {moment(msg.dateFrom).format('D MMM [at] h:mm a')}
                        </div>)
                    }
                </div>
            );
        });

        const classes = classNames('NotificationsBell',
            this.state.isPanelVisible ? 'NotificationsBell--open' : 'NotificationsBell--closed');

        return this.store && (
            <div
                className={classes}
                ref={(node) => {
                    this.ref = node;
                }}
            >
                {this.store.unreadMessagesCount > 0 && (
                    <div className="NotificationsBell__sticker">{this.store.unreadMessagesCount}</div>)}
                <button
                    className="NotificationsBell__button"
                    onClick={() => {
                        this.togglePanel();
                    }}
                >
                    <Icon name="bell" />
                </button>
                {this.state.isPanelVisible && (
                    <div className="NotificationsBell__dropdown">
                        <div className="NotificationsBell__dropdown__panel">
                            Notifications
                        </div>
                        {this.store.messagesCount > 0 && (
                            <div className="NotificationsBell__dropdown__panel NotificationsBell__dropdown__panel--messages">
                                {messages}
                            </div>)
                        }
                        <div className="NotificationsBell__dropdown__panel text-center">
                            <a
                                role="presentation"
                                onClick={(e) => {
                                    e.preventDefault();
                                    this.togglePanel();
                                    this.props.notificationsLinkHandler();
                                }}
                            >
                                See all
                            </a>
                        </div>
                    </div>
                )}
            </div>
        );
    }
}

NotificationsBell.wrappedComponent.propTypes = {
    notificationsStore: PropTypes.object.isRequired,
    notificationsLinkHandler: PropTypes.func.isRequired,
};

export default NotificationsBell;