import React from 'react';

import Component from './Component';
import { Easing, StyleSheet, Text, View, Animated ,TouchableOpacity,FlatList} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import Stack from'../Utils/Stack';


class DropdownModale extends Component {


    onItemSelected = (value) => {
        let callback = this.props.onItemSelected || function() {};
        callback(value);
        Stack.getItem('rootApp').dropdownModale.hide();
    }

    render() {
        return (
            <View style={styles.modaleWrapper}>
                <TouchableOpacity style={styles.closeModale} onPress={()=> {Stack.getItem('rootApp').dropdownModale.hide();}}>
                    <Icon name="times" color='grey' size={15} />
                </TouchableOpacity> 
                <Text style={styles.modalTitle}>{this.props.title || 'Select an option'}</Text>
                <FlatList
                        style={styles.list}
                        data={this.props.choices}
                        enableEmptySections={true}
                        renderRow={(rowData) => { return (
                            <TouchableOpacity style={styles.listItem} onPress={() => {this.onItemSelected(rowData)}}>
                                <Text>{ rowData.label}</Text>
                            </TouchableOpacity>
                        );
                }} />
            </View>
        );
    }

}

export default class extends Component {
    
    constructor(props) {
        super(props);
       
    }

    onItemSelected = (value) => {
        let callback = this.props.onChange || function() {};
        callback(value);
    }

    selectValue = () => {
        let choices = this.props.choices;
        Stack.getItem('rootApp').dropdownModale.setContent(<DropdownModale title={this.props.title || false} value={this.props.value} choices= {choices} onItemSelected={this.onItemSelected} />);
        Stack.getItem('rootApp').dropdownModale.show();
    }

    render() {
        return (
            <TouchableOpacity onPress={this.selectValue} style={styles.button}>
                {typeof this.props.value !== 'undefined' &&<Text style={{color:(this.props.color || 'black')}} >{this.props.value.label}</Text>}
                {typeof this.props.value === 'undefined' &&<Text style={styles.placeholder}>{this.props.placeholder || 'Select a value'}</Text>}
            </TouchableOpacity>
        )
    }
}

const styles = StyleSheet.create({
    modaleWrapper: {
        backgroundColor:'white',
        //padding:10,
    },
    button : {
        padding:5,
    },
    placeholder: {
        color:'grey',
    },
    closeModale : {
        position:'absolute',
        right:10,
        top:10,
        zIndex:10,
    },
    list : {
        marginTop:40,
        borderTopWidth:1,
        borderTopColor:'#eeeeee'
    },
    listItem: {
        padding:10,
        borderBottomWidth:1,
        borderBottomColor:'#eeeeee'
    },
    modalTitle: {
        position:'absolute',
        left:10,
        top:10,
        right:30,
        color:'grey',

    }
});


@@ -251,17 +251,16 @@
 tack';%0A%0A
-%0A
 class Dr
@@ -790,17 +790,16 @@
 Opacity%3E
- 
 %0A       
@@ -879,32 +879,33 @@
 option'%7D%3C/Text%3E%0A
+%0A
                 
@@ -918,56 +918,8 @@
 ist%0A
-                        style=%7Bstyles.list%7D%0A    
     
@@ -984,102 +984,43 @@
     
-    enableEmptySections=%7Btrue%7D%0A                        renderRow=%7B(rowData) =%3E %7B return (%0A    
+renderItem=%7B(%7B item, index %7D) =%3E (%0A
     
@@ -1121,24 +1121,17 @@
 ted(
-rowData
+item
 )%7D%7D%3E%0A
-    
     
@@ -1166,15 +1166,12 @@
 t%3E%7B 
-rowData
+item
 .lab
@@ -1181,20 +1181,16 @@
 %3C/Text%3E%0A
-    
         
@@ -1241,30 +1241,26 @@
             
-    );
+)%7D
 %0A           
@@ -1264,18 +1264,17 @@
         
-%7D%7D
+ 
  /%3E%0A    
@@ -1351,21 +1351,17 @@
 onent %7B%0A
-    
 %0A
+
     cons
@@ -1399,23 +1399,16 @@
 props);%0A
-       
 %0A    %7D%0A%0A
@@ -2968,10 +2968,8 @@
    %7D%0A%7D);
-%0A%0A

replace ListView by FlatList