import React, { Component } from 'react';
import { ActivityIndicator, StyleSheet, View } from 'react-native';
import { useFocusEffect } from '@react-navigation/native';

import Firebase from './../../Firebase';
import LokalFlatList from '../../components/LokalFlatList';

function UpdateLokalListe(refresh) {
    useFocusEffect(
        React.useCallback(() => {
            refresh();
        })
    );
    return null;
}

export default class LokaleBearbeitenScreen extends Component {
    state = {
        lokale: [],
        isLoading: true,
    };

    _retrieveData = async () => {
        let lokale = [];
        let query = await Firebase.db.collection('lokale').get();
        query.forEach((lokal) => {
            lokale.push({
                id: lokal.id,
                name: lokal.data().name,
                logoURL: lokal.data().logoURL,
                titelbildURL: lokal.data().titelbildURL,
            });
        });
        this.setState({ lokale, isLoading: false });
    };

    _refresh = () => {
        alert('refresh');
        this.setState({ isLoading: true });
        this._retrieveData();
    };

    componentDidMount() {
        Firebase.init();
        this._retrieveData();
    }

    render() {
        const { navigation } = this.props;
        const { lokale } = this.state;

        if (this.state.isLoading) {
            return (
                <View style={styles.container}>
                    <ActivityIndicator size="large" color="orange" />
                </View>
            );
        }

        return (
            <>
                <UpdateLokalListe refresh={this._refresh} />

                <LokalFlatList
                    lokale={lokale}
                    onPress={(item) => {
                        navigation.navigate('LokalBearbeiten', {
                            lokal: item,
                        });
                    }}
                    onRefresh={this._refresh}
                    refreshing={this.state.isLoading}
                />
            </>
        );
    }
}