'use strict';
 import React, {
   AppRegistry,
   StyleSheet,
   Text,
   View
 } from 'react-native';
 
 var PicsCart = require('react-native-sk-picscart');
 
 var test = React.createClass({
   getInitialState: function() {
     return {
       pics: []
     };
   },
   render: function(){
     return (
       <View style={styles.container}>
         <PicsCart
           style={styles.picsCart}
           onChange={this.onPicsChange}
           pics={this.state.pics}
           maxSelection={5}
           />
        <View style={styles.detailBox}>
          {this.state.pics.map(this.renderPicDetail)}
        </View>
       </View>
     )
   },
   renderPicDetail: function(pic, i){
     return (
       <Text key={i}>
        {'\npic' + (i + 1) + ' detail: \n' + JSON.stringify(pic)}
       </Text>
     )
   },
   onPicsChange: function(pics){
     this.setState({pics})
   },
 });
 
 
 const styles = StyleSheet.create({
   container: {
     flex: 1,
     backgroundColor: '#F5FCFF',
   },
   picsCart: {
     marginVertical: 12,
     marginHorizontal: 6,
   },
   detailBox: {
     justifyContent: 'space-around',
   },
 });
 
 AppRegistry.registerComponent('test', () => test);