import * as React from 'react';
import {observer, Provider} from 'mobx-react';
import {reaction} from 'mobx';
import {ToastContainer, toast} from 'react-toastify';
import NotificationsBell from '../NotificationsBell';
import NotificationContent from '../Notifications/NotificationContent';
import Icon from '../Icon';
import PropTypes from 'prop-types';
import NOTIFICATION_TYPES from 'CommonConstants/notification-types.constant';
import './styles.scss';

@observer
class NotificationsComponent extends React.Component {
    constructor(props) {
        super(props);

        this.store = this.props.notificationsStore;
        this.autoCloseAfter = 8000;
        this.autoCloseInterval = 1500;

        reaction(() => this.store.newMessages.length, () => {
            this.store.newMessages.filter((message) => !message.viewed && message.type === NOTIFICATION_TYPES.CRITICAL).forEach(this.showMessage.bind(this));
        });
    }

    linkClickHandler(e, msg) {
        e.preventDefault();
        this.props.analyticsService.trackEvent(
            e.target.getAttribute('data-pa-ga-event') || 'adv-notification-popover-is-clicked', null, null, null, () => {

                this.store.markAsViewed(msg).then(() => {
                    if (e.target.onclick) {
                        e.target.onclick(e);
                    } else if (e.target.getAttribute('href')) {
                        if (e.target.getAttribute('target') === '_blank') {
                            window.open(e.target.getAttribute('href'));
                        } else {
                            window.location = e.target.getAttribute('href');
                        }
                    }
                });
            },
        );
    }

    showMessage(msg, index = 0) {
        const content = (
            <NotificationContent
                msg={msg}
                clickHandler={(e) => this.linkClickHandler(e, msg)}
            />
        );
        if (!msg.viewed) {
            const Close = (props) => {
                return (
                    <button
                        className="Toastify__toast-close"
                        onClick={props.closeToast}
                    >
                        <Icon name="close"
                              size="small"
                              color="gray-dark"
                        />
                    </button>
                );
            };
            toast(content, {
                autoClose: this.autoCloseAfter + (index * this.autoCloseInterval),
                hideProgressBar: true,
                position: toast.POSITION.BOTTOM_LEFT,
                closeButton: <Close />,
                onOpen: () => {
                    this.props.analyticsService.trackEvent('adv-notification-popover-is-viewed');
                },
                onClose: () => {
                    this.store.markAsViewed(msg);
                },
            });
        }
    }

    render() {
        return (
            <Provider notificationsStore={this.store}>
                <React.Fragment>
                    <NotificationsBell notificationsLinkHandler={this.props.notificationsLinkHandler} />
                    <ToastContainer closeOnClick={false} />
                </React.Fragment>
            </Provider>
        );
    }
}

NotificationsComponent.propTypes = {
    notificationsStore: PropTypes.object.isRequired,
    analyticsService: PropTypes.object.isRequired,
    notificationsLinkHandler: PropTypes.func.isRequired,
};

export default NotificationsComponent;