import { useNavigation } from '@react-navigation/native';
import React from 'react';
import { AsyncStorage, Alert, Linking, Text, TouchableOpacity, View, Image } from 'react-native';
import api from '../../../services/api';
import urlRaiz from '../../../services/url';
import { styles } from './styles';
import { showMessage } from 'react-native-flash-message';
import { Ionicons } from '@expo/vector-icons';

interface DadosProps {
    data: {
        id: string;
        data: string;
        classe: string;
        movimento: string;
        descricao: string;
        usuario: string;
        lancamento: string;
        valor: string;
        saldo_geral: string;
        classe_saldo: string;
        classe_valor: string;
        classe_periodo: string;
        saldo_periodo: string;

    }
}


const CardCompras = ({ data }: DadosProps) => {
    

    const navigation: any = useNavigation();


   

    return (
        <>
            {data.id === undefined ?
                <Text style={{ color: '#595858', fontSize: 14 }}>Nenhum Registro Existente nessa data!</Text>

                :

                <View>
                    <View style={{ flex: 1, flexDirection: 'row', justifyContent: 'space-between',  }}>
                        <View style={{ width: '100%', marginTop: 3, backgroundColor:'#fff', padding:5 }}>
                            <View style={{ flex: 1, flexDirection: 'row' }}>
                                
                                <Text style={{color: data.classe, fontSize: 16, marginRight:10}}>{data.data} </Text> 
                                <Text style={{ color: data.classe_valor, fontSize: 16 }}>R$ {data.valor} </Text> 
                                <View style={{ flex: 1, flexDirection: 'row', position:'absolute', right:5}}>
                                <Text style={{ color: '#595858', fontSize: 16 }}>Total: R$</Text> 
                                <Text style={{ color: data.classe_periodo, fontSize: 16 }}>  {data.saldo_periodo}</Text>
                                </View>
                            </View>

                            <Text> <Text><Ionicons name="md-card-outline" size={20} color="#787878" />  </Text> <Text style={{ color: '#000' }}>{data.lancamento} - {data.movimento} </Text></Text>
                        </View>

                    </View>

                </View>
                
            }
        </>
    );
}

export default CardCompras;