'use strict';

import React, {
  Image,
  StyleSheet,
  Text,
  View,
} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import { CloudinaryImageNative } from 'react-cloudinary';

const _ = require('lodash');

export default React.createClass({
  render() {
    const { order } = this.props;
    const { product, productVariant } = order;
    const image = productVariant.appImages.default[0];
    return (
      <View>
        <Text>id: {order.id}</Text>
        <Text>nick: {product.data.nickname.ko}</Text>
        <Text>color: {productVariant.data.color}</Text>
        <Text>size: {productVariant.data.size}</Text>
        <Text>Unit Price(KRW): {order.KRW}</Text>
        <Icon.Button name="minus" />
        <Text>Count: {order.orderedCount}</Text>
        <Icon.Button name="plus" />
        <Text>Total(KRW): {order.totalKRW}</Text>
        <Text>Total(USD): {order.totalUSD}</Text>
        <CloudinaryImageNative
          publicId={image.publicId}
          options={{ width: 100, height: 100 }}
          style={styles.image}
        />
        <Icon.Button name="check">
          <Text style={styles.signin}>In Stock</Text>
        </Icon.Button>
        <Icon.Button name="times">
          <Text style={styles.signin}>Out Of Stock</Text>
        </Icon.Button>
      </View>
    );
  }
});

const styles = StyleSheet.create({
  image: {
    width: 90,
    height: 90,
  },
});

@@ -376,270 +376,425 @@
 nst 
-image = productVariant.appImages.default%5B0%5D;%0A    return (%0A      %3CView%3E%0A        %3CText%3Eid: %7Border.id%7D%3C/Text%3E%0A        %3CText%3Enick: %7Bproduct.data.nickname.ko%7D%3C/Text%3E%0A        %3CText%3Ecolor: %7BproductVariant.data.color%7D%3C/Text%3E%0A        %3CText%3Esize: %7BproductVariant.data.size
+%7B nickname %7D = product.data;%0A    const %7B color, size %7D = productVariant.data;%0A    const image = productVariant.appImages.default%5B0%5D;%0A    return (%0A      %3CView style=%7Bstyles.container%7D%3E%0A        %3CCloudinaryImageNative%0A          publicId=%7Bimage.publicId%7D%0A          options=%7B%7B width: 100, height: 100 %7D%7D%0A          style=%7Bstyles.thumbnail%7D%0A        /%3E%0A        %3CView style=%7Bstyles.descContainer%7D%3E%0A          %3CText%3E#: %7Border.id
 %7D%3C/T
@@ -810,95 +810,153 @@
     
+  
 %3CText%3E
-Unit Price(KRW): %7Border.KRW%7D%3C/Text%3E%0A        %3CIcon.Button name=%22minus%22 /%3E%0A
+%7Bnickname.ko%7D: %7Bcolor%7D-%7Bsize%7D%3C/Text%3E%0A          %3CView style=%7Bstyles.counterContainer%7D%3E%0A            %3CText%3E%E2%82%A9%7Border.KRW%7D X %3C/Text%3E%0A  
         
 %3CTex
@@ -947,24 +947,26 @@
 %3E%0A          
+  
 %3CText%3ECount:
@@ -994,32 +994,36 @@
 %3C/Text%3E%0A        
+    
 %3CIcon.Button nam
@@ -1029,10 +1029,11 @@
 me=%22
-pl
+min
 us%22 
@@ -1047,50 +1047,60 @@
     
-%3CText%3ETotal(KRW): %7Border.totalKRW%7D%3C/Text%3E%0A
+    %3CIcon.Button name=%22plus%22 /%3E%0A          %3C/View%3E%0A  
     
@@ -1113,20 +1113,9 @@
 ext%3E
-Total(USD): 
+%E2%82%A9
 %7Bord
@@ -1126,11 +1126,11 @@
 otal
-USD
+KRW
 %7D%3C/T
@@ -1146,165 +1146,61 @@
     
-%3CCloudinaryImageNative%0A          publicId=%7Bimage.publicId%7D%0A          options=%7B%7B width: 100, height: 100 %7D%7D%0A          style=%7Bstyles.image%7D%0A 
+  %3CView style=%7Bstyles.confirmContainer%7D%3E%0A
       
- /%3E%0A
       
-  
 %3CIco
@@ -1222,16 +1222,20 @@
 check%22%3E%0A
+    
         
@@ -1280,32 +1280,36 @@
 %3C/Text%3E%0A        
+    
 %3C/Icon.Button%3E%0A 
@@ -1303,24 +1303,28 @@
 con.Button%3E%0A
+    
         %3CIco
@@ -1346,16 +1346,20 @@
 times%22%3E%0A
+    
         
@@ -1408,32 +1408,36 @@
 %3C/Text%3E%0A        
+    
 %3C/Icon.Button%3E%0A 
@@ -1431,24 +1431,58 @@
 con.Button%3E%0A
+          %3C/View%3E%0A        %3C/View%3E%0A
       %3C/View
@@ -1536,21 +1536,393 @@
 ate(%7B%0A  
-image
+container: %7B%0A    flex: 1,%0A    flexDirection: 'row',%0A    justifyContent: 'center',%0A    alignItems: 'center',%0A    backgroundColor: '#F5FCFF',%0A  %7D,%0A  descContainer: %7B%0A    flex: 1,%0A  %7D,%0A  counterContainer: %7B%0A    flex: 1,%0A    flexDirection: 'row',%0A    alignItems: 'center',%0A  %7D,%0A  confirmContainer: %7B%0A    flex: 1,%0A    flexDirection: 'row',%0A    alignItems: 'center',%0A  %7D,%0A  thumbnail
 : %7B%0A    

order item layout update.