import React, { useContext } from 'react';
import { View, StyleSheet, Text, Image } from 'react-native';
import { AuthContext } from '../context/Auth/AuthContext';


export interface Props {
  isInformationAccount?: boolean;
  isInformationAmount?: boolean;
  amount?: string;
  numberaccount?: string;
}

export const Cuenta = ({
  isInformationAccount = true,
  isInformationAmount = true,
  
}: Props) => {
const {dataBank} = useContext(AuthContext)
const last3ultimatedigits = dataBank?.account.accountId?.slice(-3)
console.log(dataBank?.account.accountId)
  return (
    <View style={styles.contenedorCuenta}>
      <View style={styles.info}>
        <Text style={styles.description}>Mis Cuentas</Text>
        <Text>Ver todas </Text>
      </View>
      <View style={styles.container}>
        <View style={styles.sectionCard}>
          <Image
            style={styles.images}
            source={{
              uri: 'https://upload.wikimedia.org/wikipedia/commons/thumb/1/16/Banco_Pichincha_logo.svg/100px-Banco_Pichincha_logo.svg.png',
            }}
          />
          <Text style={styles.textoCuenta}>AHO{last3ultimatedigits} ★ </Text>
        </View>
        {}
        <View style={styles.sectionCard}>
          {isInformationAccount ? (
            <Text>
              {"Ahorros"} {'\n'}
              <Text style={styles.textoCuenta}>{dataBank?dataBank.account.accountId:""}</Text>
            </Text>
          ) : (
            <Text>Información no disponible</Text>
          )}
          {isInformationAmount ? (
            <View>
              <Text>
                Saldo Disponible:{'\n'}
                <Text style={styles.textoCuenta}>{dataBank?dataBank.account.balance:""}</Text>
              </Text>
            </View>
          ) : (
            <Text>Saldo no disponible</Text>
          )}
        </View>
      </View>
    </View>
  );
};

const styles = StyleSheet.create({
  textoCuenta: {
    fontWeight: 'bold',
    fontSize: 17,
  },
  sectionCard: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
    padding: 20,
  },
  contenedorCuenta: {
    display: 'flex',
    justifyContent: 'space-between',
    alignItems: 'center',
    width: '100%',
  },

  container: {
    backgroundColor: '#FFFFFF',
    width: '90%',
    marginBottom: 30,
    height: 150,
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    boxShadow: 'inset 1em 1em gold',
    shadowColor: '#000',
    borderRadius: 10,
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  description: {
    fontWeight: 'bold',
    fontSize: 16,
    color: '#1b003a',
  },
  info: {
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 20,
    width: '100%',
  },
  images: {
    width: 120,
    height: 25,
  },
});