import { 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'

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

    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={() => 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>
    )
}