import React, { FC, useEffect, useState } from 'react'
import { Card } from '../Card'
import { FlatList, Text, TouchableOpacity } from 'react-native'
import { useFetchWithAuth } from '../../hooks/useFetchWithAuth'
import { useNavigation } from '@react-navigation/native';

interface Props {
    endpoint: string
}

export const CardList:FC <Props> = ({endpoint}) => {

    const navitation = useNavigation();

    let defaultData:[] = [];

  const [entities, setEntities] = useState(defaultData);


  const getInitData = async () => {
    
      const { data, error } = await useFetchWithAuth(endpoint);

      if (!error) {
          setEntities(data);
      } else {
          console.log(error)
      }
  }

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


 return (
   <>
   
    <FlatList
        data={entities}
        renderItem={({item}) => 
        <Card>
            <TouchableOpacity
                onPress={()=>navitation.navigate("CustomerFormScreen" as never)}
            >
                <Text>
                    {item["nombre"]}
                </Text>
            </TouchableOpacity>
        </Card>
        }
        keyExtractor={item => item["id"]}
      />
    
   
   </>
 )
}