import React, { Component, PropTypes } from 'react';
import Ramda from 'ramda';

import Spacing from 'material-ui/styles/spacing';
import EventCard from './EventCard';
import NoEventsCard from './NoEventsCard';

import getMuiTheme from 'material-ui/styles/getMuiTheme';
import Theme from '../../themes/DefaultTheme';

import './Notifications.css';


/**
 * Notifications component that displays peoplesoft events.
 */
export default class Notifications extends Component {

  constructor(props) {
    super(props);

    this.markAllAsRead = this.markAllAsRead.bind(this);
    this.changeReadStatus = this.changeReadStatus.bind(this);
    this.renderCards = this.renderCards.bind(this);

    this.getEventType = this.getEventType.bind(this);
    this.getEventCount = this.getEventCount.bind(this);
    this.getIndicatorType = this.getIndicatorType.bind(this);
    this.getTitle = this.getTitle.bind(this);
  }

  getChildContext() {
    const theme = getMuiTheme(Theme);
    theme.appBar.textColor = 'black';
    theme.appBar.spacing = Spacing.desktopSubheaderHeight;
    return {
      muiTheme: theme,
    };
  }

  /**
   * jsx that renders notifications dropdown
   * @return {function} jsx
   */
  render() {
    let cards = null;

    if (!this.props.events || this.getEventCount() < 1) {
      cards = (<NoEventsCard title="No Events" message="Future events will display here." />);
    } else if (this.props.events.faultMessages) {
      cards = (<NoEventsCard title="Error" message={this.props.events.faultMessages[0].descr} />);
    } else {
      cards = this.renderCards();
    }

    return (
      <div className="notifications-container" style={Theme.notifications.container}>
        {cards}
      </div>
		);
  }

  /**
   * Change read/unread status of event
   * @param  {int} id unique event id
   * @param  {string} status R = read and U = unread
   */
  changeReadStatus(id, status) {
    // Changes the status then loads the Events
    this.props.changeReadStatus(parseInt(id, 10), status);
  }

  /**
   * Mark all events as read
   */
  markAllAsRead() {
    const evts = this.props.events.events;
    for (let i = 0; i < evts.length; ++i) {
      if (evts[i].status === 'U') {
        this.props.changeReadStatus(parseInt(evts[i].id, 10), 'R');
      }
    }
  }

  /**
   * Render Cards for events
   * @return {array} array of Card
   */
  renderCards() {
    const eventArray = Array.from(this.props.events.events);
    const cards = eventArray.map((_event) => {
      const eventType = this.getEventType(_event);
      const card = (
        <EventCard
          key={`EventCard-${_event.id}`}
          message={_event.message}
          title={this.getTitle(eventType)}
          messageDate={_event.startDate}
          changeReadStatus={Ramda.curry(this.changeReadStatus)(_event.id)}
          readStatus={_event.status}
          goto={_event.goto}
          serviceIndicatorType={this.getIndicatorType(eventType)}
        />
      );

      return (card);
    });

    return (cards);
  }

  /**
   * Get event type from event object
   * @param  {object} _event uggo peoplesoft event object
   * @return {string} event type
   */
  getEventType(_event) {
    if (_event.data.sccNtfevtData === undefined) {
      return null;
    }

    return _event.data.sccNtfevtData.filter((item) => item.sccNtfevtDatKey === 'EVENT_TYPE')[0].sccNtfevtDatVal;
  }

  /**
   * Get font icon from event type
   * @param  {string} eventType event type
   * @return {string} font icon name
   */
 getIndicatorType(eventType) {
   const indicators = {
     SERVICE_INDICATOR: 'action-report-problem',
     100000013: 'action-info-outline',
     SERVICE_INDICATOR_REMOVED: 'action-account-balance',
     SI_REMOVED: 'action-view-column',
     default: ' ',
   };

   return (indicators[eventType] || indicators.default);
 }

 /**
  * Get title from event type
  * @param  {string} eventType event type
  * @return {string} title
  */
  getTitle(eventType) {
    const titles = {
      SERVICE_INDICATOR: 'Service Indicator',
      UC_CATALYST_TO_RADIUS: 'Catalyst to Radius Event',
      UC_RADIUS_TO_CATALYST: 'Radius to Catalyst Event',
      default: 'Event',
    };

    return (titles[eventType] || titles.default);
  }

  /**
   * Total number of events.
   * @return {number} event count
   */
  getEventCount() {
    if (!this.props.events) {
      return 0;
    }

    return this.props.events.totalEventsCount;
  }
}

Notifications.childContextTypes = {
  muiTheme: React.PropTypes.object,
};

Notifications.propTypes = {
  events: PropTypes.object,
  changeReadStatus: PropTypes.func.isRequired,
};