//Dependencies
import React, { Component , PropTypes} from 'react';
import NotificationList from './notification-list';
import {capitalize} from 'lodash/string';
import {groupBy, map, pluck} from 'lodash/collection';
import {getConfig} from '../config';
import moment from 'moment';
const propTypes = {
    data: PropTypes.array,
    onSingleRead: PropTypes.func.isRequired,
    onGroupRead: PropTypes.func.isRequired
};
function _isYoungerThanA(periodName, date) {
    return moment(date).diff(moment().subtract(1, periodName)) > 0;
}
// function to group date
function groupDate({creationDate: date}) {
    if(_isYoungerThanA('day', date)) {
        return 'today';
    }
    if(_isYoungerThanA('week', date)) {
        return 'week';
    }
    if(_isYoungerThanA('month', date)) {
        return 'month';
    }
    return 'before';
}

function translate(key){
  const {i18n} = getConfig();
  return i18n[key];
}

function formatDate(date) {
    if(_isYoungerThanA('day', date)) {
        return momentDate.fromNow();
    }
    if(_isYoungerThanA('week', date)) {
        return 'Last week';
    }
    if(_isYoungerThanA('month', date)) {
        return 'Last month';
    }
    return 'Before';
}

function sortDateFn(a, b){
  return new Date(b.creationDate) - new Date(a.creationDate);
}

//Maybe i should add a Notification Group component by date which uses a notifciation list component
const NotificationGroup = ({data, onGroupRead, onSingleRead}) => {
    let idx = 0; // maybe use sth else as key
    return (
        <div data-focus='notification-group'>
            {
                map(
                    groupBy(data, groupDate),
                    (group, groupTitle) => {
                        return (
                            <div key={idx++}>
                                <h2>{translate(groupTitle)} <button className='mdl-button mdl-js-button mdl-button--icon' onClick={()=> onGroupRead(pluck(group, 'uuid'))}><i className='material-icons'>done_all</i></button></h2>
                                <NotificationList data={group.sort(sortDateFn)} onRead={onSingleRead}/>
                            </div>
                        );
                    }
                )
            }
        </div>
    );
};

NotificationGroup.propTypes = propTypes;

export default NotificationGroup;

@@ -172,19 +172,22 @@
 roupBy, 
-map
+reduce
 , pluck%7D
@@ -656,16 +656,18 @@
 return '
+0_
 today';%0A
@@ -728,17 +728,23 @@
 return '
-w
+1_lastW
 eek';%0A  
@@ -804,17 +804,23 @@
 return '
-m
+2_lastM
 onth';%0A 
@@ -836,16 +836,18 @@
 return '
+3_
 before';
@@ -941,588 +941,709 @@
 ion 
-f
+s
 or
-ma
 tDate
-(date) %7B%0A    if(_isYoungerThanA('day', date)) %7B%0A        return momentDate.fromNow();%0A    %7D%0A    if(_isYoungerThanA('week', date)) %7B%0A        return 'Last week';%0A    %7D%0A    if(_isYoungerThanA('month', date)) %7B%0A        return 'Last month';%0A    %7D%0A    return 'Before';%0A%7D%0A%0Afunction sortDateFn(a, b)%7B%0A  return new Date(b.creationDate) - new Date(a.creationDate);%0A%7D%0A%0A//Maybe i should add a Notification Group component by date which uses a notifciation list component%0Aconst NotificationGroup = (%7Bdata, onGroupRead, onSingleRead%7D) =%3E %7B%0A    let idx = 0; // maybe use sth else as key
+Fn(a, b)%7B%0A  return new Date(b.creationDate) - new Date(a.creationDate);%0A%7D%0A%0Afunction sortNameFn(a,b)%7B%0A  if (a.key %3C b.key)%0A    return -1;%0A  else if (a.key %3E b.key)%0A    return 1;%0A  else%0A    return 0;%0A%7D%0A%0A//Maybe i should add a Notification Group component by date which uses a notifciation list component%0Aconst NotificationGroup = (%7Bdata, onGroupRead, onSingleRead%7D) =%3E %7B%0A    //    console.log('Grouped infos', groupBy(data, groupDate), reduce(groupBy(data, groupDate));%0A    const groupedAndSortedNotifs = reduce(%0A      groupBy(data, groupDate),%0A      (accumulator, value, key) =%3E %7B%0A          accumulator.push(%7Bkey, value%7D);%0A          return accumulator;%0A      %7D,%0A      %5B%5D%0A    ).sort(sortNameFn);
 %0A   
@@ -1732,58 +1732,35 @@
     
-map(%0A                    groupBy(data, groupDate),
+groupedAndSortedNotifs.map(
 %0A   
@@ -1777,22 +1777,35 @@
        (
+%7Bvalue: 
 group,
+ key:
  groupTi
@@ -1807,16 +1807,17 @@
 oupTitle
+%7D
 ) =%3E %7B%0A 
@@ -1890,13 +1890,18 @@
 ey=%7B
-idx++
+groupTitle
 %7D%3E%0A 

Secure sort.