import React, { useEffect,useContext } from 'react';
import { View, Text, StyleSheet, Pressable } from 'react-native';
import { useRoute} from '@react-navigation/native';
import { AuthContext } from '../context/Auth/AuthContext';
export const ConfirmarTransaccion = () => {
  const {sendTransaccion}=useContext(AuthContext)
  useEffect(() => {
    sendTransaccion(true)
    return () => {
      sendTransaccion(false)
    }
  }, [])
  
  const route = useRoute<any>();
  const dataTransaccion=route.params.dataTransaccion
  const amount=dataTransaccion.datosDebtor.data.transaction.amount
  console.log(amount)
  const debtor=dataTransaccion.datosDebtor.data.debtor
  const creditor=dataTransaccion.datosDebtor.data.creditor
  let dataConvert:string=dataTransaccion.datosDocument.data.accountingDate
  const dataConvert2:string=dataConvert.substring(0,2)+'/'+dataConvert.substring(2,4)+'/'+dataConvert.substring(4,8)
  console.log(dataTransaccion)
  return (
    <View style={styles.container}>
      
      <Text style={styles.textoCuenta}>
        Ha pagado {amount? parseFloat(amount).toFixed(2): 0.0}$ a{' '}
        {debtor && debtor.customer.fullName ? debtor.customer.fullName.toUpperCase() : ''}
      </Text>
      <View style={styles.info}>
        <View style={styles.seccion}>
          <View style={styles.subsecciones}>
            <Text> Valor: </Text>
            <Text>{amount}</Text>
          </View>
        </View>
        <View style={styles.seccion}>
          <View style={styles.subsecciones}>
            <Text> De: </Text>
            <Text>{creditor.customer.fullName}</Text>
          </View>
          <View style={styles.subsecciones}>
            <Text> Desde la cuenta: </Text>
            <Text>{debtor.account.accountId}</Text>
          </View>
          <View style={styles.subsecciones}>
            <Text>A la cuenta: </Text>
            <Text>{debtor.account.accountId}</Text>
          </View>
          <View style={styles.subsecciones}>
            <Text> Telefono </Text>
            <Text>0996730142</Text>
          </View>
        </View>
        <View style={styles.seccion}>
          <View style={styles.subsecciones}>
            <Text> Fecha de pago: </Text>
            <Text>{dataConvert2}</Text>
          </View>
          <View style={styles.subsecciones}>
            <Text> Nro Comprobante: </Text>
            <Text>{dataTransaccion.datosDocument.data.businessDocumentId}</Text>
          </View>
        </View>
        <View style={styles.seccion}>
          <Text style={styles.comprobante}>
            Compartir Comprobante
          </Text>
        </View>
      </View>
      <Pressable style={styles.Btn}>
        <Text>Continuar</Text>
      </Pressable>
    </View>
  );
};
const styles = StyleSheet.create({
  textoCuenta: {
    fontWeight: 'bold',
    fontSize: 20,
    width: 200,
    textAlign: 'center',
  },
  container: {
    padding: 20,
    flex: 1,
    alignItems: 'center',
    backgroundColor: '#FFFFFF',
  },
  icono: {
    fontSize: 30,
    color: '#422d4e',
    padding: 15,
  },
  containerIcono: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  info: {
    marginTop: 20,
    borderTopColor: 'black',
    borderTopWidth: 1,
    backgroundColor: '#ececec',
    width: '100%',
  },
  seccion: {
    borderTopColor: 'black',
    borderTopWidth: 0.3,
    backgroundColor: '#efefef',
    width: '100%',
  },
  subsecciones: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    paddingTop: 5,
    paddingBottom: 5,
    paddingLeft: 15,
    paddingRight: 15,
  },
  comprobante: {
    padding: 20,
    textAlign: 'center',
    fontWeight: 'bold',
  },
  iconoShare: {
    fontSize: 25,
  },
  Btn: {
    width: '100%',
    backgroundColor: '#FFDD00',
    padding: 15,
    marginTop: 35,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
});