import { useContext, useEffect, useState } from 'react'
import { FlatList, RefreshControl, Text, View } from 'react-native'
import { useNavigation } from '@react-navigation/native';
import { Card } from '../../components/Card'
import { CardList } from '../../components/cardList/CardList'
import { Button } from '../../components/Button'
import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
import { SalesOrderContext } from './SalesOrderContex';

export const SalesOrderListScreen = () => {
    const navigation = useNavigation();
    const [refreshing, setRefreshing] = useState(false);
    const endpoints = "pedido";
    let defaultData: [] = [];
    const { setLines } = useContext(SalesOrderContext);
    const [entities, setEntities] = useState(defaultData);

    const getInitData = async () => {
        const { data, error } = await useFetchWithAuth(endpoints);
        if (!error) {
            setEntities(data);
        } else {
            console.log(error)
        }
    }

    useEffect(() => {
        getInitData();
    }, [refreshing])

    const onRefresh = () => {
        setRefreshing(true);
        setTimeout(() => {
            setRefreshing(false);
        }, 1000);
    };

    return (
        <View className='bg-sky-100'>
            <Button
                title=' + '
                additionalStyle='z-10 absolute bottom-2 right-0'
                onPress={() => {
                    setLines([]);
                    navigation.navigate("SalesOrderFormScreen" as never)}
                    } />
            <FlatList
                refreshControl={
                    <RefreshControl
                        refreshing={refreshing}
                        onRefresh={onRefresh}
                    />
                }
                data={[""]}
                renderItem={({ item }) =>
                    <View id={item} className='flex-1 items-center'>
                        <Card>
                            <Text className='text-xl text-center my-4'>Listado de pedidos</Text>
                            <CardList screenName="SalesOrderFormScreen" columnDisplay="numero" entities={entities} />
                        </Card>
                    </View>
                }
                keyExtractor={item => item}
            />
        </View>
    )
}