import React from 'react';
import { Text, View, StyleSheet, SafeAreaView, TouchableOpacity, FlatList} from 'react-native';

import database from '@react-native-firebase/database';

class HomePedidos extends React.Component {
    state = {itens: ""};
    state = {desativado: ""};
    state = {novositens: ""};

    componentDidMount() {
        let dbRef = database().ref('/cafe/itens');
        this.listenerFirebase(dbRef);
    }

    listenerFirebase(dbRef) {
        const newItens = [];
        dbRef.once('value', data => {
            data.forEach(child => {
                newItens.push({
                    name: child.val().name,
                    key: child.key
                });
                this.setState({itens: newItens});
            })
        })
    }

    addItem ( chave, nome) {
        this.setState({
            desativados: this.state.desativado.push(chave),
            bagulho: this.state.novositens.push(nome)
        })
    }

    addPedido () {
        let dbRef2 = database().ref('/cafe/pedidos');
        let dbRef3 = database().ref('/cafe/pedidos');
        const higher_id = 0;
        dbRef2.orderByChild("number").limitToLast(1).once("value", data => {
            higher_id = data.val().number;
        })
        higher_id++;
        const itensAdicionar = this.state.novositens;
        dbRef3.push({
            status: "Solicitado",
            number: higher_id,
            itens: itensAdicionar
        })
    }

    render(){
        const {itens} = this.state;
        const {desativado} = this.state;
        const {novositens} = this.state;

        const renderItem = ( {item} ) => {
            if(desativado == undefined){
                return(
                    <View style={styles.itemContainer}>
                        <View style={styles.item}>
                            <Text style={styles.itemTitle}> {" " + item.name + " "}</Text>
                        </View>
                        <TouchableOpacity style={styles.addButtonItem} onPress={this.addItem(item.key, item.name)}>
                            <Text style={styles.itemTitle}> + </Text>
                        </TouchableOpacity>
                    </View>
                );
            }else if(desativado.includes(item.key)){
                return(
                    <View style={styles.itemContainer}>
                        <View style={styles.item}>
                            <Text style={styles.itemTitle}> {" " + item.name + " "}</Text>
                        </View>
                        <TouchableOpacity style={styles.addButtonItem} onPress={this.addItem(item.key, item.name)}>
                            <Text style={styles.itemTitle}> + </Text>
                        </TouchableOpacity>
                    </View>
                );
            }
        }
        return(
            <SafeAreaView style={styles.container}>
                <Text style={styles.texto}>
                    Vamos fazer o pedido do café?
                </Text>
                <Text style={styles.emoji}>
                    ☕️
                </Text>
                <TouchableOpacity style={styles.addPedidoButton}>
                    <Text style={styles.addPedidoTitle} onPress={() => this.addPedido}> Confirmar Pedido </Text>
                </TouchableOpacity>
                <FlatList
                data={itens}
                renderItem={renderItem}
                keyExtractor={item => item.key}
                />
            </SafeAreaView>
        );
    }
}

const styles = StyleSheet.create({
    item:{
        backgroundColor:"#d1250f",
        width:"80%",
        flexDirection:"row",
        paddingVertical:10,
    },
    itemTitle:{
        fontSize:22,
        color:"#fff",
        textAlign:"left"
    },
    container:{
        flex: 1,
        justifyContent:"flex-start",
        backgroundColor:"#eee",
        alignItems:"center"
    },
    texto:{
        fontSize:25,
        color:"#000",
        textAlign:"center",
        marginTop:20
    },
    emoji:{
        fontSize:50,
        marginBottom:20
    },
    addButtonItem:{
        backgroundColor:"#b8220f",
        textAlign:"center",
        justifyContent:"center",
        paddingHorizontal:20
    },
    itemContainer:{
        flexDirection:"row",
        justifyContent:"center"
    },
    addPedidoButton:{
        backgroundColor:"#d1250f",
        textAlign:"center",
        justifyContent:"center",
        paddingHorizontal:30,
        paddingVertical:10,
        marginBottom:10,
        borderRadius:44
    },
    addPedidoTitle:{
        color: "#fff",
        fontSize:22
    }
})
export default HomePedidos;