import React, {PropTypes} from 'react';
import {StyleSheet, Dimensions, View, Text, Image} from 'react-native';
import {Icon} from 'react-native-elements';

import colors from '../config/colors';
const window = Dimensions.get('window');

import HTMLView from 'react-native-htmlview';

const CommentListItem = (
  {
    comment,
    navigation
  }
) => (
  <View
      style={styles.container}>
      <View style={styles.header}>
        <Image
          style={styles.avatar}
          source={{uri: comment.user.avatar_url}}
          />

          <Text style={styles.titleSubtitleContainer}>
            <Text
              style={styles.linkDescription}
              onPress={() => navigation.navigate('Profile', {
                user: comment.user,
              })}
            >
              {comment.user.login}{'  '}
            </Text>
          </Text>

        <View style={styles.dateContainer}>
          <Text style={styles.date}>2h</Text>
        </View>
      </View>

      <View style={styles.commentBody}>
        <HTMLView
          value={comment.body_html.replace(new RegExp('<blockquote>', 'g'), '<h2>')
            .replace(new RegExp('</blockquote>', 'g'), '</h2>')}
          stylesheet={commentStyles}
        />
      </View>
    </View>
);

CommentListItem.propTypes = {
  comment: PropTypes.object,
  navigation: PropTypes.object,
};

const styles = StyleSheet.create({
  container: {
    paddingTop: 10,
    paddingRight: 10,
    paddingBottom: 10,
    borderBottomColor: '#ededed',
    borderBottomWidth: 1,
    backgroundColor: 'transparent'
  },
  header: {
    flexDirection: 'row',
    marginLeft: 10,
    alignItems: 'center',
  },
  avatar: {
    backgroundColor: colors.greyLight,
    width: 34,
    height: 34,
    borderRadius: 17
  },
  titleSubtitleContainer: {
    justifyContent: 'center',
    flex: 1,
    marginLeft: 10,
    color: colors.primaryDark,
    fontFamily: 'AvenirNext-Regular',
  },
  dateContainer: {
    flex: 0.15,
    alignItems: 'flex-end',
    justifyContent: 'center'
  },
  linkDescription: {
    fontFamily: 'AvenirNext-DemiBold',
  },
  date: {
    color: colors.greyDark,
  },
  commentBody: {
    marginTop: 4,
    marginBottom: 10,
    marginLeft: 54,
    marginRight: 10,
  }
});

const commentStyles = StyleSheet.create({
  p: {
    color: colors.primaryDark,
    fontFamily: 'AvenirNext-Regular',
  },
  a: {
    fontFamily: 'AvenirNext-DemiBold',
  },
  h2: {
    color: colors.greyLight,
    fontFamily: 'AvenirNext-DemiBold',
  }
});

export default CommentListItem;

@@ -56,20 +56,8 @@
 eet,
- Dimensions,
  Vie
@@ -70,16 +70,34 @@
 t, Image
+, TouchableOpacity
 %7D from '
@@ -122,14 +122,13 @@
 ort 
-%7BIcon%7D
+Emoji
  fro
@@ -148,15 +148,12 @@
 ve-e
-lements
+moji
 ';%0A%0A
@@ -194,49 +194,8 @@
 rs';
-%0Aconst window = Dimensions.get('window');
 %0A%0Aim
@@ -1197,16 +1197,848 @@
       /%3E
+%0A%0A        %3CView style=%7Bstyles.reactionsBar%7D%3E%0A          %3CTouchableOpacity%0A            style=%7Bstyles.reactionContainer%7D%3E%0A            %3CText style=%7Bstyles.reaction%7D%3E%3CEmoji name=%22+1%22/%3E%3C/Text%3E%0A            %3CText style=%7Bstyles.reactionCount%7D%3E%0A              6%0A            %3C/Text%3E%0A          %3C/TouchableOpacity%3E%0A%0A          %3CTouchableOpacity%0A            style=%7Bstyles.reactionContainer%7D%3E%0A            %3CText style=%7Bstyles.reaction%7D%3E%3CEmoji name=%22-1%22/%3E%3C/Text%3E%0A            %3CText style=%7Bstyles.reactionCount%7D%3E%0A              1%0A            %3C/Text%3E%0A          %3C/TouchableOpacity%3E%0A%0A          %3CTouchableOpacity%0A            style=%7Bstyles.reactionContainer%7D%3E%0A            %3CText style=%7Bstyles.reaction%7D%3E%3CEmoji name=%22tada%22/%3E%3C/Text%3E%0A            %3CText style=%7Bstyles.reactionCount%7D%3E%0A              2%0A            %3C/Text%3E%0A          %3C/TouchableOpacity%3E%0A        %3C/View%3E
 %0A      %3C
@@ -3034,24 +3034,513 @@
 ght: 10,%0A  %7D
+,%0A  reactionsBar: %7B%0A    flexDirection: 'row',%0A    flex: 1,%0A    paddingTop: 15,%0A    justifyContent: 'flex-start',%0A    alignItems: 'flex-start',%0A  %7D,%0A  reactionContainer: %7B%0A    marginRight: 10,%0A    flexDirection: 'row',%0A    justifyContent: 'flex-start',%0A    alignItems: 'center',%0A  %7D,%0A  reaction: %7B%0A    fontSize: 17,%0A  %7D,%0A  reactionCount: %7B%0A    color: colors.primaryDark,%0A    paddingLeft: 3,%0A    paddingTop: 5,%0A    marginRight: 15,%0A    fontSize: 13,%0A    fontFamily: 'AvenirNext-Medium',%0A  %7D,
 %0A%7D);%0A%0Aconst 

add emoji as reactions to comment list item