import React, { Component, PropTypes } from 'react';
import {
  ScrollView,
  View,
  Image,
  Text,
  StyleSheet,
  TouchableHighlight
} from 'react-native';
import { bindActionCreators } from 'redux';
import { connect } from 'react-redux';
import i18n from 'react-native-i18n';
import { Icon } from 'react-native-elements';
import { orderBy, map } from 'lodash';
import moment from 'moment';

import { pushRoute } from '../boundActionCreators/navigation';
import theme from '../themes/ApplicationStyles';
import colors from '../themes/Colors';

const styles = StyleSheet.create({
  container: {
    backgroundColor: colors.background,
  },
  icon: {
    flex: 2,
    alignItems: 'center',
    justifyContent: 'center'
  },
  messageContainer: {
    flex: 3,
    justifyContent: 'center',
    alignItems: 'center'
  },
  message: {
    fontSize: 20,
    textAlign: 'center'
  }
});

class NotificationsContainer extends Component {
  goTo = (route) => {
    const { push } = this.props;

    push({
      key: route,
    });
  }

  render() {
    const { notifications } = this.props;
    let content;

    if (notifications.length === 0) {
      content = (
        <View style={{
          flex: 1
        }}>
          <View style={styles.icon}>
            <Image source={require('../images/budgie-icon.png')} />
          </View>
          <View style={styles.messageContainer}>
            <Text style={styles.message}>
              {i18n.t('NO_NOTIFICAITONS')}
            </Text>
          </View>
        </View>
      );
    } else {
      content = (notifications.map((n, i) => (
        <TouchableHighlight
          key={i}
          onPress={() => this.goTo(n.route)}
          underlayColor={colors.underlay}>
          <View
            style={{
              flexDirection: 'row',
              padding: 10,
              borderBottomColor: colors.snow,
              borderBottomWidth: 1,
              backgroundColor: n.isSeen ? 'white' : 'red'
            }}>
            <View style={{
              padding: 5,
              backgroundColor: colors.warm,
              justifyContent: 'center',
            }}>
              {!!n.icon && !n.picture &&
                <Icon
                  color={colors.snow}
                  name={n.icon}
                  size={50}
                />
              }
              {!!n.picture && !n.icon &&
                <Image
                  source={{
                    uri: n.picture
                  }}
                  style={{
                    width: 50,
                    height: 50,
                  }} />
              }
              {!n.picture && !n.icon &&
                <Image
                  source={require('../images/budgie-icon.png')}
                  style={{
                    width: 50,
                    height: 50,
                  }} />
              }
            </View>
            <View style={{
              flex: 1,
              padding: 5,
              justifyContent: 'center',
            }}>
              <View>
                <View style={{
                  flexDirection: 'row',
                }}>
                  <Text
                    style={{
                      flex: 1,
                      flexWrap: 'wrap',
                      fontWeight: 'bold',
                      fontSize: 18,
                    }}>{i18n.t(n.message, n.placeholders)}</Text>
                </View>
              </View>
              <View>
                <Text style={{
                  fontSize: 12,
                }}>{n.dateToShow}</Text>
              </View>
            </View>
          </View>
        </TouchableHighlight>
      )));
    }

    return (
      <ScrollView style={[theme.container, styles.container]}>
        {content}
      </ScrollView>
    );
  }
}

NotificationsContainer.propTypes = {
  notifications: PropTypes.array,
  push: PropTypes.func.isRequired,
};

function mapStateToProps(state) {
  const { notifications } = state.ebudgie;
  const mappedNotifications = map(notifications, n => {
    const momentDate = moment(n.date);
    return {
      ...n,
      momentDate,
      dateToShow: `${momentDate.format('MMMM DD YYYY')} ${i18n.t('AT')} ${momentDate.format('HH:mm')}`
    };
  });
  return {
    notifications: orderBy(mappedNotifications, ['momentDate', 'message'], ['desc', 'asc'])
  };
}

function mapDispatchToProps(dispatch) {
  return {
    push: bindActionCreators(pushRoute, dispatch),
  };
}

export default connect(
  mapStateToProps,
  mapDispatchToProps,
)(NotificationsContainer);

@@ -447,24 +447,97 @@
 avigation';%0A
+import %7B setNotificationIsSeen %7D from '../actionCreators/notifications';%0A
 import theme
@@ -1009,21 +1009,28 @@
 goTo = (
-route
+notification
 ) =%3E %7B%0A 
@@ -1044,31 +1044,106 @@
 t %7B push
- %7D = this.props
+, markNotificationAsSeen %7D = this.props;%0A    markNotificationAsSeen(notification.id, true)
 ;%0A%0A    p
@@ -1159,16 +1159,29 @@
    key: 
+notification.
 route,%0A 
@@ -1836,22 +1836,16 @@
 s.goTo(n
-.route
 )%7D%0A     
@@ -4067,16 +4067,69 @@
 quired,%0A
+  markNotificationAsSeen: PropTypes.func.isRequired,%0A
 %7D;%0A%0Afunc
@@ -4668,16 +4668,97 @@
 patch),%0A
+    markNotificationAsSeen: bindActionCreators(setNotificationIsSeen, dispatch),%0A
   %7D;%0A%7D%0A%0A

Mark notification as seen if user clicks on it in Notification center