import * as React from 'react';
import PropTypes from 'prop-types';

class NotificationContent extends React.Component {
    componentDidMount() {
        this.links = this.ref.querySelectorAll('a[data-pa-ga-event]');
        this.links.forEach((link) => {
            link.addEventListener('click', this.trackClick.bind(this));
        });
    }

    componentWillUnmount() {
        this.links.forEach((link) => {
            link.removeEventListener('click', this.trackClick.bind(this));
        });
    }

    trackClick(e) {
        this.props.clickHandler(e);
    }

    render() {
        return (
            <div
                ref={(el) => {
                    this.ref = el;
                }}
            >
                <div className="Toastify__toast-title">
                    {this.props.msg.title}
                </div>
                <div
                    className="Toastify__toast-content"
                    // eslint-disable-next-line react/no-danger
                    dangerouslySetInnerHTML={{__html: this.props.msg.shortContent}}
                />
            </div>
        );
    }
}

NotificationContent.propTypes = {
    msg: PropTypes.object.isRequired,
    clickHandler: PropTypes.func.isRequired,
};

export default NotificationContent;