import * as React from 'react';
import PropTypes from 'prop-types';
import {observer} from 'mobx-react';
import moment from 'moment/moment';
import Icon from '../Icon';
import PageTitle from '../PageTitle';
import NOTIFICATION_TYPES from 'CommonConstants/notification-types.constant';
import './styles.scss';

const sortingDirections = [
    'asc',
    'desc',
];

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

        this.store = this.props.notificationsStore;
        this.state = {
            sorting: {
                field: 'created_at',
                order: sortingDirections[0],
            },
        };
    }

    toggleSorting(field) {
        const sorting = {
            ...this.state.sorting,
            field,
            order: this.state.sorting.order === sortingDirections[0] ? sortingDirections[1] : sortingDirections[0],
        };

        this.setState({
            sorting,
        });

        this.store.loadNotifications({
            sort: this.state.sorting.field,
            order: this.state.sorting.order,
            type: [
                NOTIFICATION_TYPES.CRITICAL,
                NOTIFICATION_TYPES.INFO,
            ],
        }).then((res) => {
            this.setState({
                messages: res.data.result.items,
            });
        });
    }

    render() {
        return (
            <div className="NotificationsList">
                <PageTitle
                    title="Notifications"
                    additionalClass="NotificationsList__page-title"
                />
                <div className="NotificationsList__messages">
                    <div className="NotificationsList__messages-header">
                        <span>Content</span>
                        <span
                            className="NotificationsList__messages-header-sort"
                            role="presentation"
                            onClick={() => {
                                this.toggleSorting('created_at');
                            }}
                        >
                            {this.state.sorting.order === sortingDirections[1] ? (
                                <Icon
                                    name="arrow-up"
                                    color="gray-dark"
                                />
                            ) : (
                                <Icon
                                    name="arrow-down"
                                    color="gray-dark"
                                />
                            )
                            }
                            Date & Time, EST
                        </span>
                    </div>
                    {(this.state.messages || this.store.messages).map((msg) => {
                        return (
                            <div
                                key={msg.id}
                                className="NotificationsList__message"
                            >
                                <div className="NotificationsList__message-content">
                                    <div className="NotificationsList__message-title">
                                        {msg.title}
                                    </div>
                                    <div
                                        className="NotificationsList__message-body"
                                        dangerouslySetInnerHTML={{__html: msg.shortContent}}
                                    />
                                </div>
                                {msg.dateFrom && (
                                    <div className="NotificationsList__message-date">
                                        {moment(msg.dateFrom).format('D MMM [at] h:mm a')}
                                    </div>)
                                }

                            </div>);
                    })}
                </div>
            </div>
        );
    }
}

NotificationsList.propTypes = {
    notificationsStore: PropTypes.object.isRequired,
};
export default NotificationsList;