import React from 'react';
import { StyleSheet, View, Text, Image } from 'react-native';
import I18n from 'react-native-i18n';
import { Actions } from 'react-native-router-flux';

import Button from '../shared/Button';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    padding: 20,
    backgroundColor: '#ffffff',
  },
  innerContainer: {
    borderRadius: 10,
    alignItems: 'center',
  },
  innerContainerMissionComplete: {
    flexDirection: 'row',
  },
  modalButton: {
    marginTop: 10,
  },
  icon: {
    marginTop: 7,
    marginRight: 7,
    height: 46,
    width: 46,
  },
  textMission: {
    alignSelf: 'center',
    marginTop: 5,
    width: 200,
  },
});

const TaskRewardModal = ({ badges, receivedKoins, newKoinsTotal }) => (
  <View>
    <View style={styles.container}>
      <View style={[styles.innerContainer, { backgroundColor: '#fff', padding: 20 }]}>
        <Text>{I18n.t('reward_alert_title')}</Text>
        <View style={styles.innerContainerMissionComplete}>
          <Image style={styles.icon} source={require('../../assets/img/koin_no_value.png')} />
          <Text style={styles.textMission}>
            {I18n.t('reward_alert_koins_new', { koin_count_new: receivedKoins })}{'\n'}
            {I18n.t('reward_alert_koins_total', { koin_count_total: newKoinsTotal })}
          </Text>
          </View>
          <Button onPress={Actions.pop}>{I18n.t('messagebox_ok')}</Button>
      </View>
    </View>
  </View>
);

TaskRewardModal.propTypes = {
  badges: React.PropTypes.array,
  receivedKoins: React.PropTypes.any.isRequired,
  newKoinsTotal: React.PropTypes.any.isRequired,
};

module.exports = TaskRewardModal;

@@ -276,16 +276,91 @@
 lex: 1,%0A
+    padding: 20,%0A    flexDirection: 'column',%0A    backgroundColor: '#fff',%0A
     just
@@ -411,57 +411,8 @@
 r',%0A
-    padding: 20,%0A    backgroundColor: '#ffffff',%0A
   %7D,
@@ -440,24 +440,32 @@
     
-borderRadius: 10
+justifyContent: 'center'
 ,%0A  
@@ -536,69 +536,84 @@
     
-flexDirection: 'row',%0A  %7D,%0A  modalButton: %7B%0A    marginTop: 10
+justifyContent: 'center',%0A    alignItems: 'center',%0A    flexDirection: 'row'
 ,%0A  
@@ -699,16 +699,72 @@
 6,%0A  %7D,%0A
+  textTitle: %7B%0A    fontSize: 14,%0A    marginTop: 5,%0A  %7D,%0A
   textMi
@@ -808,25 +808,48 @@
  marginTop: 
-5
+10,%0A    marginBottom: 10
 ,%0A    width:
@@ -940,19 +940,8 @@
 %3E (%0A
-  %3CView%3E%0A  
   %3CV
@@ -970,26 +970,24 @@
 ainer%7D%3E%0A    
- 
- 
 %3CView style=
@@ -991,9 +991,8 @@
 le=%7B
-%5B
 styl
@@ -1012,56 +1012,11 @@
 iner
-, %7B backgroundColor: '#fff', padding: 20 %7D%5D
 %7D%3E%0A
-  
     
@@ -1022,16 +1022,41 @@
    %3CText
+ style=%7Bstyles.textTitle%7D
 %3E%7BI18n.t
@@ -1082,26 +1082,24 @@
 e')%7D%3C/Text%3E%0A
-  
       %3CView 
@@ -1152,18 +1152,16 @@
         
-  
 %3CImage s
@@ -1241,26 +1241,24 @@
  /%3E%0A        
- 
- 
 %3CText style=
@@ -1279,18 +1279,16 @@
 ssion%7D%3E%0A
-  
         
@@ -1367,34 +1367,32 @@
 '%5Cn'%7D%0A          
- 
- 
 %7BI18n.t('reward_
@@ -1457,18 +1457,16 @@
         
-  
 %3C/Text%3E%0A
@@ -1471,28 +1471,24 @@
 %3E%0A      
- 
-   
 %3C/View%3E%0A
         
@@ -1479,20 +1479,16 @@
 %3C/View%3E%0A
-    
       %3CB
@@ -1550,30 +1550,16 @@
 Button%3E%0A
-      %3C/View%3E%0A
     %3C/Vi

update reward modal design