import React, { useEffect } from 'react';
import { Dimensions, Image, Pressable, StyleSheet, Text, View } from 'react-native';

// Components
import AddNewAccount from './AddNewAccount';
// import InvestmentTips from './InvestmentTips';
import NetWorthHistory from './NetWorthHistory';
import TableChart from './TableChart';
import TableCha from './TableCHa';

//Redux
import { useSelector } from 'react-redux';
import { selectConfigTheme, selectShowBalance } from '../../../store/slices/utilsSlice';
import { selectAccountsListIsEmpty } from '../../../store/slices/accountSlice';

// Utils
import { abbreviateScalingNumber, currencyFormatter } from '../../../utils';
import { ConfigColors } from '../../../utils/types';
import { TotalInfo } from '../home.types';
import Dashboard from '../screens/Dashboard';
//Languages
import { useTranslation } from '../../../context/language_context';
import { selectCredentialProvidersData, selectUserPermissions, selectUserRoleType } from '../../../store/slices/userSlice';
import { RoleType } from '../../../constants/enums';
import { UserPermissions } from '../../../services/remote/backup/enums';
import { TouchableOpacity } from 'react-native-gesture-handler';
import ECCModule from '../../../services/local/crypto/ECC_Module';
import { AESDecryptObject, AESEncryptObject } from '../../../services/local/crypto/aes.functions';
const { height } = Dimensions.get('window');

type Props = {
  navigation: any;
  totalInfo: TotalInfo;
};
const DashboardBody: React.FC<Props> = ({ navigation, totalInfo }) => {
  const { t } = useTranslation();
  const userPermissions = useSelector(selectUserPermissions);
  const schemaColor = useSelector(selectConfigTheme);
  const colors = schemaColor.colorSchema.colors;
  const accountsListIsEmpty = useSelector(selectAccountsListIsEmpty);
  const assetsNumber = totalInfo.totalAssets;
  const lipNumber = totalInfo.totalLib;
  // const token = useSelector(selectToken);
  // const ap = async () => {
  //   const userId = '65679a0e764b5025ad189bf0';
  //   console.log(token);
  //   if (token) {
  //     // const s = await moneyHubExchangeCode({
  //     //   token,
  //     //   code: 'uqZPXUz3eVWg4P6kpWUKKxw8ap8BqFSoB8s_UMt0UkP',
  //     //   idToken:
  //     //     'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlRxVk1laV9XdUtqZW5HWlJUbnJpeUxXRnZuS2tzTjNvLWFuWXBqS0JEbVUifQ.eyJzdWIiOiI2NTY3NDE0ZGQwYmZjZDMzYTgxY2M0MjciLCJub25jZSI6ImJhciIsImNfaGFzaCI6ImNjUllmaTBKZDczQ3dobVFoT0Jhc3ciLCJzX2hhc2giOiJMQ2EwYTJqX3hvXzVtMFU4SFRCQk5BIiwiYXVkIjoiYzQzNjJmNTQtMDEwZS00ZWI2LTk2MDktNjI1OTMwOWUxN2U1IiwiZXhwIjoxNzAxMjY5MzUyLCJpYXQiOjE3MDEyNjU3NTIsImlzcyI6Imh0dHBzOi8vaWRlbnRpdHkubW9uZXlodWIuY28udWsvb2lkYyJ9.VtJfPDfWGyu5rWtTkITK9bERNLhfrVyCif7-kTEsSJWkQOT0HSjCSURsWe4ft1EODAjEO3aSHTGPN0zYiatIfmJ6j0PGoPc3V9vdgA9HMjPI3RLLC489iYuX8thSXmsB7uQB9mRFmGUTfOLi6zhrhE8qvVtzc4W7yVgw32ud-jjPERm-CxSIQ8LVFkFQjvjJFKw7KFedfVyyPH9bLWkIT_a6YJ5acLFEoWacSNQBR5J_Kof39riEJfsy8jPYXQQiMu3cVM--6AVZWdxEm2eg9DNR94fk92yhbB31yqNyUGQUxaWA3fzoldEAeN2SxytURCdLy0gOZr_V0tSx8dnaAw',
  //     // });
  //     console.log('click');
  //     // const s = await moneyHubExchangeCode({
  //     //   token,
  //     //   code: 'IC7jPCYo9vUxEnb4KIFPHqzSInhwgByqrYdtzrszlZQ',
  //     //   idToken:
  //     //     'eyJhbGciOiJSUzI1NiIsInR5cCI6IkpXVCIsImtpZCI6IlRxVk1laV9XdUtqZW5HWlJUbnJpeUxXRnZuS2tzTjNvLWFuWXBqS0JEbVUifQ.eyJzdWIiOiI2NTY4NWNiNWYxMWRiY2Q0ZjBlNTg0ZWMiLCJub25jZSI6ImJhciIsImNfaGFzaCI6InpleFZpTnk0SnROSmRpWUhDSk5yU3ciLCJzX2hhc2giOiJMQ2EwYTJqX3hvXzVtMFU4SFRCQk5BIiwiYXVkIjoiYzQzNjJmNTQtMDEwZS00ZWI2LTk2MDktNjI1OTMwOWUxN2U1IiwiZXhwIjoxNzAxMzQxOTAyLCJpYXQiOjE3MDEzMzgzMDIsImlzcyI6Imh0dHBzOi8vaWRlbnRpdHkubW9uZXlodWIuY28udWsvb2lkYyJ9.V1F_uEaRPCIj9XwLqq94CooMV5sLjRprSK9uCJakUfFgaFyWD8NoRg_qn8Q7NaJmU2vlp6yfDZS133u6Bk36gSN4vGCbBDV4oY9PD7Z5doAsUELg3UEPRpWQv09uK-cZPqhE9o0fMMN_xGl6WzoF-KZq-FtlPTRWLmoMJNIj3p13clqXfXfYVU8OP63jpMN9hVDRQUvG4DLSSL0lurHfuOCIfitgGCX1f0Izjyk09jB1HlyiCWSBvCaHB3afG_4PF4OXP9ggNiF4f0RXwVQvuxumQ4ZAwpFT_4uu0ynMYE-6dbUSXIEvruX65sQh307BV-7NmpdxNMbY9CVFEwZ4ZA',
  //     // });
  //     const s = await moneyHubGetAccounts({userId, token});
  //     console.log(s);
  //   }
  // };

  const showBalance = useSelector(selectShowBalance);

  //encryption shenanigans
  const { keysPair } =
    useSelector(selectCredentialProvidersData);
  //console.log("client keysPair "+JSON.stringify(keysPair)); //uncomment to use yours

  const clientKeypair = {
    publicKey: "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAE+91/PKCpfXC2nvwyTWX7cu989MdBSbMVIZVv0gByo6QczJRMQ57LNcn2gmJw8SKfpQ+P+/0ZW+Dn+YKzC/njzQ==",
    privateKey: "MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgZIGRjt4gm4Z2Ta5+nXAzz1OX0JwzoERcJ64+cYEFJbShRANCAAT73X88oKl9cLae/DJNZfty73z0x0FJsxUhlW/SAHKjpBzMlExDnss1yfaCYnDxIp+lD4/7/Rlb4Of5grML+ePN"
  }

  //function to generate and log key pairs
  async function generateKeyPairs() {
    const keysPair = await ECCModule.generateKeyPair();
    console.log("keysPair "+JSON.stringify(keysPair));
  }

  // you can use these or replace with what you got by clicking generate receipient keypairs:
  const advisorsKeyPair={
  publicKey: "MFkwEwYHKoZIzj0CAQYIKoZIzj0DAQcDQgAEJE5N6SaWkpWui4iZnwnWGkpBPsXwTTSdxNWqPE3xf1QU+7iCTRQ8U4uwclcRUlLLJhZo0Ypird/8JlGYijqWjA==",
  privateKey: "MIGHAgEAMBMGByqGSM49AgEGCCqGSM49AwEHBG0wawIBAQQgK4a+g04BGWHCcaOUXNzK/jyZ/n7fJ9HDUMDUl+GIcuqhRANCAAQkTk3pJpaSla6LiJmfCdYaSkE+xfBNNJ3E1ao8TfF/VBT7uIJNFDxTi7ByVxFSUssmFmjRimKt3/wmUZiKOpaM"
  }

  //obj to be encrypted
  const block = {
    enc_blockData: '{"name":"John Doe","age":25,"city":"New York"}',
    blockHash: "0x1234567890",
    blockId: "0x1234567890",
    blockType: "user",
    createTime: 1633700000000,
    itemId: "0x1234567890",
    lastSyncTime: 1633700000000,
    userId: "0x1234567890"
  }

  // function to encrypt data
  async function encryptData() {

    const sharedKey = await ECCModule.deriveSharedSecret(
      clientKeypair.privateKey,
      clientKeypair.publicKey,
                  // advisorsKeyPair.publicKey
    );

     const encryptedData = AESEncryptObject({
                plainObject: JSON.parse(block.enc_blockData), // Ensure it’s parsed back to an object
                secretKey: sharedKey,
     });
    console.log("encryptedData "+JSON.stringify(encryptedData));
  }

 const theEncryptedData = "U2FsdGVkX1+ci/ttOX6C3KQCXjn2fjwy1Yy3U09ZqMuUclNjxaQQWTCxl/e5SeLnCCbVJCvXSM0+LahT9KIXjA=="
  // function to decrypt data
  async function decryptData(encryptedData:any) {
    const sharedKey = await ECCModule.deriveSharedSecret(
      clientKeypair.privateKey,
      // advisorsKeyPair.privateKey,
      clientKeypair.publicKey

    );

    const decryptedData = AESDecryptObject({
      cipherText: encryptedData,
      secretKey: sharedKey,
    });
    console.log("decryptedData " + JSON.stringify(decryptedData));

  }


  return (
    <View style={styles(colors).container}>
      <Pressable
        style={styles(colors).card}
        // onPress={ap}
        onPress={() => navigation.navigate('Analytic', { screen: 'Assets' })}
      >
        <Text style={styles(colors).textHeader}>{t.dashboard.body.dashboardCard.assets}</Text>
        {showBalance ? (
          <Text style={styles(colors).textBody}>
            {totalInfo.currency} {/* {currencyFormatter(totalInfo.totalAssets) ?? 500} */}
            {abbreviateScalingNumber(assetsNumber, false)}
          </Text>
        ) : (
          <Text style={styles(colors).textBody}>{totalInfo.currency} xxxxxx</Text>
        )}
      </Pressable>
      <Pressable
        style={styles(colors).card}
        onPress={() => navigation.navigate('Analytic', { screen: 'Liabilities' })}
      >
        <Text style={styles(colors).textHeader}>{t.dashboard.body.dashboardCard.liabilities}</Text>
        {showBalance ? (
          <Text style={styles(colors).textBody}>
            {/* {totalInfo.currency} {currencyFormatter(totalInfo.totalLib) ?? 500} */}
            {totalInfo.currency} {abbreviateScalingNumber(lipNumber, false)}
          </Text>
        ) : (
          <Text style={styles(colors).textBody}>{totalInfo.currency} xxxxxx</Text>
        )}
      </Pressable>
      {userPermissions.find((i) => i === UserPermissions.Write) && (
        <AddNewAccount navigation={navigation} />
      )}

      {/* generate keypairs */}
      <TouchableOpacity
        style={styles(colors).container}
        onPress={() => {
          generateKeyPairs();
        }}
      >
        <Text style={styles(colors).title}>Generate receipient keypairs-only click once then save from log</Text>
      </TouchableOpacity>
      {/* a simple pressable with the text 'encrypt' inside and when pressed should simply log ('encrypted') */
      }
      <TouchableOpacity
        style={styles(colors).container}
        onPress={() => {
          encryptData();
        }}
      >
        <Text style={styles(colors).title}>Encrypt</Text>
      </TouchableOpacity>

      {/* //for decrypting */}
      <TouchableOpacity
        style={styles(colors).container}
        onPress={() => {
          decryptData(theEncryptedData);
        }}
      >
        <Text style={styles(colors).title}>Decrypt</Text>
      </TouchableOpacity>

      {/* <CachedImage
        source=
          'https://naiyas.com/wp-content/uploads/2023/11/icon-other-main.png'

        style={{ height: 350, width: 150 }}
      /> */}
      {accountsListIsEmpty ? (
        <Image
          style={{ alignSelf: 'center', marginVertical: 64 }}
          source={require('../../../assets/images/no_data.png')}
        />
      ) : (
        <>
          <TableCha />
          {/* <TableChart /> */}
          <NetWorthHistory />
        </>
      )}
      {/* <View style={[styles(colors).card, { marginVertical: 10 }]}>
        <Text style={styles.title}>Debt to Equity Ratio</Text>
        <View
          style={{
            flexDirection: 'row',
            alignItems: 'center',
            justifyContent: 'space-between',
            width: width * 0.25,
          }}
        >
          <Text style={{ fontSize: 20, color: 'black' }}>2.2</Text>
          <FeatherIcon name="arrow-down-right" size={20} color="green" />
          <FeatherIcon name="info" size={20} color={COLORS.Primary} />
        </View>
      </View> */}
      {/* <InvestmentTips /> */}
    </View>
  );
};

const styles = (colors: ConfigColors) =>
  StyleSheet.create({
    textHeader: { fontSize: 16, fontWeight: '700' },
    container: {
      paddingHorizontal: 20,
      marginTop: height * 0.07,
      // alignItems: 'center',
    },
    textBody: {
      fontSize: 16,
      fontWeight: '600',
      color: colors.primary.light[0],
    },
    card: {
      width: Dimensions.get('window').width * 0.9,
      marginTop: 16,
      backgroundColor: 'white',
      paddingHorizontal: 10,
      paddingVertical: 16,
      borderRadius: 5,
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      shadowColor: '#000000',
      shadowOffset: {
        width: 1,
        height: 6,
      },
      shadowOpacity: 0.21,
      shadowRadius: 6.65,
      elevation: 9,
    },
    title: {
      fontSize: 16,
      color: colors.mainText.light[0],
    },
  });

export default DashboardBody;