import { StyleSheet, Text, View, Pressable, TextInput } from 'react-native';
import React, { useEffect } from 'react';
import type { TransactionDebit } from '../../interface/post';
import { sendTransaccion } from '../../hooks/sendTransaccion';
import dataQr from './dataqr/dataQr.json'
import { useNavigation,useRoute } from '@react-navigation/native';
import { useState, useContext} from 'react';
import { Loader } from '../Loader';
import { AuthContext } from '../../context/Auth/AuthContext';
export const ValorPagarQr = () => {
  const navigate = useNavigation<any>();
  const route = useRoute<any>();
  const [loader, setloader] = useState(false);
  const {dataBank,token} = useContext(AuthContext);
  console.log(route.params?.data)
  const debit: TransactionDebit = dataQr
  useEffect(() => {
  console.log(dataBank)
    if (dataBank) {
      debit.data.debtor.customer.fullName = dataBank.customer.fullName
      debit.data.debtor.customer.documentNumber = dataBank.customer.documentNumber
      debit.data.debtor.customer.documentType = dataBank.customer.documentType
      debit.data.debtor.customer.customerId = dataBank.customer.customerId
      debit.data.debtor.account.accountId = dataBank.account.accountId
    }
  }, [dataBank])

     
  const send = async (data: TransactionDebit) => {
    try{
    componentWillMount();
    const res = await sendTransaccion(token!,data)
    navigate.navigate("ConfirmarTransaccion", { dataTransaccion: { "datosDebtor": { ...data }, "datosDocument": { ...res.data } } })
    setloader(false)  
     }
    catch(err:any){
        console.log(err.response.data);
        setloader(false) 
    }
    {
      /*
    const sign = new Sign(data, "https://api-test.pichincha.com/payment-execution/v2/direct-transfers", uid);
    const XApigeeCredentials = "ZkdlUk5HYXFtMFdKQ2ZtdG85a25hUFNSNWVhRDlBaG86dVNjR2ZkeGg1VlRMZElPeA==";
    const signature = sign.getSignature();
    const headers = {
      "X-Apigee-Credentials": XApigeeCredentials,
      "X-Device-IP": "200.10.89.34",
      "X-Guid": uid,
      "X-Device": "29xp3L6xJCaTSmWsQHsIsIqiyoU7Z0Az+EfYl2Bq5e0=",
      "X-Session": "3e80ddc9-29fb-4c99-b82e-403287fe4ce5",
      "X-Signature": signature,
    }
    console.log(headers)

    axios.post("https://api-test.pichincha.com/payment-execution/v2/direct-transfers", data, { headers: headers }).then((res) => {
      componentWillMount();
      navigate.navigate("ConfirmarTransaccion", { dataTransaccion: { "datosDebtor": { ...data }, "datosDocument": { ...res.data } } })
      setloader(false)
    }).catch((err) => {
      console.log(err.response.data);
      setloader(false)
    })
  }
  */
}
  }
 
  const accountbind = (account: string) => {
    const accountbin =
      account.substring(0, 3) + '*****' + account.substring(7, 10);
    return accountbin;
  };
  function componentWillMount() {
    setTimeout(() => {
      setloader(false);
    }, 3000);
  }


  return (
    <View style={styles.containerVistaPrevia}>
      {loader ?
        <Loader testID="Loader" ></Loader>
        :
        <View style={styles.containerVistaPrevia}>
          <Text style={styles.encabezados}>Para </Text>

          <View style={styles.contenedorSeccion}>
            <Text style={styles.nombre}>{debit.data.creditor.customer.fullName}</Text>
            <Text>Cuenta de Ahorros </Text>
            <Text>{accountbind(debit.data.debtor.account.accountId)}</Text>
          </View>
          <Text style={styles.encabezados}>Valor</Text>

          <View style={styles.contenedorSeccion}>
            <Text style={styles.ValorPagar}>
              {debit.data.transaction.amount}
            </Text>
          </View>

          <Text style={styles.encabezados}>Desde</Text>
          <View style={styles.container}>
            <View>
              <Text style={styles.titulo}>AHO{}</Text>
              <Text style={styles.parrafos}>Cuenta de ahorros </Text>
              <Text style={styles.parrafos}>{debit.data.debtor.account.accountId}</Text>
            </View>
            <View>
            </View>
          </View>
          <Text style={styles.encabezados}>Descripcion</Text>

          <TextInput
            style={styles.input}
            placeholder="¿Que estas pagando? (Opcional)"
            maxLength={40}
          />


          {/* <Text>{transaccionData.valor}</Text> */}
          {/* <Text>{transaccionData.idusuario}</Text> */}
          <Pressable
          testID="continue"
            onPress={() => {
              send(debit)
              setloader(true);
            }
            }
            style={styles.Btncontinuar}
          >
            <Text>Pagar</Text>
          </Pressable>
        </View>
      }
    </View>
  )
}




const styles = StyleSheet.create({
  card: {
    marginTop: 10,
    margin: 20,
  },
  icon: {
    fontSize: 24,
  },
  container: {
    backgroundColor: '#FFFFFF',
    width: '100%',
    height: 80,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 13,
    boxShadow: 'inset 1em 1em gold',
    shadowColor: '#000',
    borderRadius: 10,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  titulo: {
    fontWeight: 'bold',
    color: 'black',
    fontSize: 17,
  },
  parrafos: {
    fontWeight: 'bold',
    fontSize: 13,
  },
  textoEncabezado: {
    fontWeight: 'bold',
    fontSize: 20,
  },
  encabezado: {
    width: '100%',
  },
  input: {
    backgroundColor: '#FFFFFF',
    borderStyle: 'solid',
    borderColor: 'black',
    padding: 10,
  },
  Btncontinuar: {
    width: '100%',
    backgroundColor: '#FFDD00',
    padding: 15,
    marginTop: 35,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  nombre: {
    fontSize: 19,
    fontWeight: 'bold',
    color: 'black',
  },
  containerVistaPrevia: {
    flex: 1,
    padding: 35,
    width: '100%',
    backgroundColor: '#FFFFFF',
    // CAMBIAR LA ALTURA LA 100% DE LA PANTALLA
    height: 650,
  },
  encabezados: {
    fontWeight: 'bold',
    fontSize: 16,
    paddingTop: 10,
    paddingBottom: 10,
  },
  contenedorSeccion: {
    padding: 8,
  },
  ValorPagar: {
    fontSize: 36,
    fontWeight: 'bold',
    color: 'black',
  },
})