/**
 * Created by jules on 12/02/17.
 */

//noinspection JSUnresolvedVariable
import React, { Component } from 'react';
//noinspection JSUnresolvedVariable
import {
    AppRegistry,
    StyleSheet,
    View,
    KeyboardAvoidingView,
    Animated,
    Alert,
} from 'react-native';
import {
    Container,
    Content,
    List,
    Text,
    Input
} from 'native-base';
import IconIO from 'react-native-vector-icons/Ionicons';
import _ from 'lodash';

export default class Token extends Component {

    constructor(props) {
        super(props)

        this.state = {
            tokenValues: {},
            tokens:
                [
                    {
                        'title': 'B3 - Conférence UX',
                        'date' : '22.02.2017'
                    },
                    {      'title': 'B3 - Expression Ecrite',
                        'date': '22.02.2017'
                    },
                    {
                        'title': 'B3 - Systeme Unix',
                        'date': '22.02.2017'
                    },
                ]
        }

        this._submitToken = this._submitToken.bind(this);
        this._renderTokens = this._renderTokens.bind(this);
    }

    _submitToken(id) {

        /*

         Send token..

         */

        const removedTokens = _.filter([ ...this.state.tokens ], (_, n) => `${n}` !== id);
        this.setState({
            tokens: removedTokens,
            tokenValues: {},
        });
    }

    _renderTokens(token, _, id) {

        return (
            <View style={{ flex: 1, backgroundColor: '#233445', margin: 10, borderColor: 'rgba(255, 255, 255, 0.2)', elevation: 8 }}>
                <View style={{ flexDirection: 'row' }}>
                    <IconIO
                        name="ios-pricetag-outline"
                        size={18}
                        style={{ flex: 0.10, alignSelf: 'center', color: '#FFF', marginLeft: 10 }}/>
                    <Text style={{ flex: 1, color: '#FFF', fontSize: 12, fontWeight: 'bold' }}>
                        {token.title}
                    </Text>
                    <Text style={{ flex: 0.3, color: '#FFF', fontSize: 12, marginBottom: 8, fontWeight: '100' }}>
                        {token.date}
                    </Text>
                </View>
                <View>
                    <KeyboardAvoidingView>
                        <Input
                            style={{
                                height: 35,
                                color: '#FFF',
                                fontSize: 11,
                                marginLeft: 10,
                                marginBottom: 10,
                                marginRight: 10,
                                textAlign: 'center',
                                backgroundColor: 'rgba(255, 255, 255, 0.03)'
                            }}
                            maxLength={8}
                            keyboardType="numeric"
                            spellCheck={false}
                            autoCorrect={false}
                            multiline={false}
                            placeholder="Type your token"
                            placeholderTextColor="rgba(255, 255, 255, 0.6)"
                            onSubmitEditing={() => this._submitToken(id)}
                            onChangeText={(text) => this.setState({
                                tokenValues: {
                                    ...this.state.tokenValues,
                                    [id]: text
                                }
                            })}
                            value={this.state.tokenValues[id] || ''}
                        />
                    </KeyboardAvoidingView>
                </View>
            </View>
        )
    }

    render() {
        return (
            <Container>
                <Content contentContainerStyle={{ flex: 1, backgroundColor: '#2c3e50'}}>
                    <List
                        style={{ marginTop: 8 }}
                        dataArray={this.state.tokens}
                        renderRow={this._renderTokens}
                    />
                </Content>
            </Container>
        )
    }
};
@@ -642,33 +642,32 @@
                 
- 
 %7B%0A              
@@ -3820,24 +3820,29 @@
  render() %7B%0A
+%0A    
         retu
@@ -3838,32 +3838,34 @@
        return (%0A
+%0A 
             %3CCon
@@ -3856,24 +3856,27 @@
             
+   
 %3CContainer%3E%0A
@@ -3887,24 +3887,28 @@
             
+   
+ 
 %3CContent con
@@ -3924,25 +3924,24 @@
 inerStyle=%7B%7B
- 
 flex: 1, bac
@@ -3991,14 +3991,86 @@
     
-%3CList%0A
+    %7B this.state.tokens.length %3E 0 ?%0A                            %3CList%0A       
     
@@ -4089,24 +4089,25 @@
         
+ 
 style=%7B%7B
  marginT
@@ -4098,17 +4098,16 @@
 style=%7B%7B
- 
 marginTo
@@ -4110,20 +4110,27 @@
 inTop: 8
- 
 %7D%7D%0A
+        
         
@@ -4195,24 +4195,32 @@
             
+ 
+       
 renderRow=%7Bt
@@ -4250,35 +4250,714 @@
                 
+        
 /%3E%0A
+                            :%0A                            %3CView style=%7B%7B flex: 1, flexDirection: 'column', justifyContent: 'center', %7D%7D%3E%0A                                %3CIconIO%0A                                    name=%22ios-checkmark-outline%22%0A                                    size=%7B80%7D%0A                                    style=%7B%7B color: '#62c462', alignSelf: 'center', %7D%7D%0A                                /%3E%0A                                %3CText style=%7B%7B color:'#FFF', alignSelf: 'center', fontSize: 12, %7D%7D%3E%0A                                    No token waiting..%0A                                %3C/Text%3E%0A                            %3C/View%3E%0A                        %7D%0A    
                 
@@ -4967,16 +4967,20 @@
 ontent%3E%0A
+    
         

Fix input and management case or no token