import React, {PropTypes} from 'react';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import { Link } from 'react-router';
import * as d3 from 'd3';
import * as eventActions from '../actions/eventActions';

class EventsPage extends React.Component {
  tableRows() {
    return this.props.events.map( (event, i) => {
      let session = this.props.sessions.filter(session => {
         return event.relationships.session.data.id === session.id;
      });
      let objectLink = `${this.domain}/${event.attributes.data.source.resource_key}/#!asset/${event.attributes.data.resource_key}`;
      let rowClass = `Rtable Rtable--5cols ${(i % 2 === 0) ? 'even' : 'odd'}`;
      let mailToLink = `mailto:${session[0].attributes.user.email}`;
      let location = `${session[0].attributes.location.city}, ${session[0].attributes.location.region_name} ${session[0].attributes.location.country_code}`;

      return (
        <div key={event.id} className={rowClass}>
          <div className="Rtable-cell">{new Date(event.attributes.created_at).toDateString()}</div>
          <div className="Rtable-cell">{event.attributes.data.action_name}</div>
          <div className="Rtable-cell">
            <Link to={objectLink}>
              {event.attributes.data.resource_type}
            </Link>
          </div>
          <div className="Rtable-cell">
            <a href={mailToLink}>
              {session[0].attributes.user.first_name} {session[0].attributes.user.last_name}
            </a>
          </div>
          <div className="Rtable-cell">{location}</div>
        </div>
      );
    });
  }

  handleSort() {
    this.props.dispatch(eventActions.updateSortState( !this.props.ascending ));
   }

  render() {
    const { brandfolderDetails } = this.props;
    let dateClass=`float-right fa fa-${this.props.ascending ? 'caret-down' : 'caret-up'}`;

    return (
      <div className="container main-content-container">
        <div className="Rtable Rtable--5cols" ref="eventsFeedHeader" style={this.tableHeadStyle} >
          <div className="Rtable-cell header active"
               onClick={this.handleSort.bind(this)}>
            <h2>Date <i className={dateClass}/> </h2>
          </div>
          <div className="Rtable-cell header"><h2>Action</h2></div>
          <div className="Rtable-cell header"><h2>Resource</h2></div>
          <div className="Rtable-cell header"><h2>User</h2></div>
          <div className="Rtable-cell header"><h2>location</h2></div>
        </div>
        <div className="table-wrap" style={this.tableStyle}>
          {this.tableRows()}
        </div>
      </div>
    );
  }
}

EventsPage.propTypes = {
  events: PropTypes.array.isRequired,
  sessions: PropTypes.array.isRequired,
  updateSortState: PropTypes.func,
  ascending: PropTypes.bool,
  dispatch: PropTypes.func.isRequired
};

function mapStateToProps(state) {
  let eventsObject = state.events;
  let events;
  if(state.events.ascending) {
    events = eventsObject.events.sort(function(x, y){
       return d3.ascending(x.attributes.created_at, y.attributes.created_at);
    });
  } else {
    events = eventsObject.events.sort(function(x, y){
       return d3.descending(x.attributes.created_at, y.attributes.created_at);
    });
  }
  return {
    events: events,
    ascending: state.events.ascending,
    sessions: state.events.sessions || []
  };
}

export default connect(
  mapStateToProps
)(EventsPage);