import React, {PropTypes} from 'react';
import {Tooltip, OverlayTrigger, Button} from 'react-bootstrap';
import Notification from './Notification';
import sortBy from 'lodash/sortBy';

const NotificationsApp = (props) => {
  const settings = props.notificationsAppState;
  const actions = props.actions;

  const markAsRead = function(notificationId) {
    return function() {
      actions.markNotificationAsRead(notificationId);
    };
  };

  const markAllAsRead = function() {
    actions.markAllNotificationsAsRead();
  };

  const unreadNotifications = function(notifications) {
    return notifications.filter((notification) => !notification.isRead);
  };

  const loadMore = function() {
    actions.loadMoreNotifications();
  };

  const markAllAsReadTooltip = (
    <Tooltip id="markallasread">
      Mark all as read
    </Tooltip>
  );

  return (

    <div className="kbc-notifications-app">
      {unreadNotifications(settings.notifications).length ? (
      <div className="row kbc-row notifications-header">
        <div className="col-sm-offset-11 col-sm-1">
          <OverlayTrigger placement="top" overlay={markAllAsReadTooltip}>
            <em className="fa fa-fw fa-check mark-all-as-read" onClick={markAllAsRead}></em>
          </OverlayTrigger>
        </div>
      </div>
      ) : null}
      {sortBy(settings.notifications, notification => -1 * new Date(notification.created).getTime()).map(function (notification) {
        return (
          <div className="row kbc-row" key={notification.id}>
            <Notification
              key={notification.id}
              title={notification.title}
              message={notification.message}
              type={notification.type}
              created={notification.created}
              isRead={notification.isRead}
              payload={notification.payload}
              project={notification.project}
              markAsRead={markAsRead(notification.id)}
            />
          </div>
        );
      })}
      {!settings.notifications.length ? (
        <div className="row kbc-row">
          <p className="text-muted text-center">
            You have no notifications.
          </p>
          <p className="text-muted text-center">
            Here's the place, where you'll get notifications about important events in Keboola Connection and all your projects.
          </p>

        </div>) : (
          <div className="row kbc-row">
            <div className="text-center">
              {!settings.allNotificationsLoaded ? (
                <Button bsStyle="default" onClick={loadMore} disabled={settings.isLoadingMore} className="load-more">
                  Load more
                </Button>
              ) : (
                <Button bsStyle="default" disabled className="load-more">
                  This is the end
                </Button>
              )}
            </div>
          </div>
        )}
    </div>
  );
};

NotificationsApp.propTypes = {
  actions: PropTypes.object.isRequired,
  notificationsAppState: PropTypes.object.isRequired
};

export default NotificationsApp;
