import * as React from 'react';
import PropTypes from 'prop-types';
import {observer} from 'mobx-react';
import Popup from '../Popup';
import Icon from '../Icon';
import './styles.scss';

@observer
class SingleNotification extends React.Component {
    constructor(props) {
        super(props);
        this.store = this.props.notificationsStore;
        this.state = {
            isPopupOpen: false,
        };
    }

    componentDidMount() {
        this.store.loadSingleNotification();
    }

    showNotification() {
        this.setState({isPopupOpen: true});
    }

    render() {
        if (!this.store.singleNotification) return null;

        return (
            <div className="SingleNotification">
                <div className="SingleNotification__icon">
                    <Icon name="mail"
                          color="orange"
                          size="small" />
                </div>
                <div className="SingleNotification__content" dangerouslySetInnerHTML={{__html: this.store.singleNotification.shortContent}} />
                <a
                    className="SingleNotification__link"
                    onClick={() => {
                        this.showNotification();
                    }}
                >
                    Read more
                </a>

                <Popup
                    isVisible={this.state.isPopupOpen}
                    isBlackOverlay
                    buttons={[]}
                    closePromise={() => {
                        this.setState({isPopupOpen: false});
                        return Promise.resolve();
                    }}
                    title={this.store.singleNotification.title}
                    content={(
                        <div dangerouslySetInnerHTML={{__html: this.store.singleNotification.content}} />
                    )}
                />
            </div>

        );
    }
}

SingleNotification.propTypes = {
    notificationsStore: PropTypes.object.isRequired,
};

export default SingleNotification;