import React, { useEffect, useState } from 'react';
import { View, ActivityIndicator } from 'react-native';
import { Button, Text } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialCommunityIcons';

import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { useNavigation } from '@react-navigation/native';

import { createWallet, resetWallet, retrieveAccounts } from '../utils/accounts';
import { DialogComponent } from './Dialog';
import { NetworkDropdown } from './NetworkDropdown';
import Accounts from './Accounts';
import CreateWallet from './CreateWallet';
import ResetWalletDialog from './ResetWalletDialog';
import styles from '../styles/stylesheet';
import { useAccounts } from '../context/AccountsContext';
import { StackParamsList } from '../types';

const HomeScreen = () => {
  const { accounts, setAccounts } = useAccounts();

  const navigation =
    useNavigation<NativeStackNavigationProp<StackParamsList>>();

  useEffect(() => {
    if (accounts.ethAccounts.length > 0) {
      navigation.setOptions({
        headerRight: () => (
          <Button onPress={() => navigation.navigate('WalletConnect')}>
            {<Icon name={'qrcode-scan'} size={20} />}
          </Button>
        ),
      });
    } else {
      navigation.setOptions({
        headerRight: undefined,
      });
    }
  }, [navigation, accounts]);

  const [isWalletCreated, setIsWalletCreated] = useState<boolean>(false);
  const [isWalletCreating, setIsWalletCreating] = useState<boolean>(false);
  const [walletDialog, setWalletDialog] = useState<boolean>(false);
  const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);
  const [network, setNetwork] = useState<string>('eth');
  const [currentIndex, setCurrentIndex] = useState<number>(0);
  const [isAccountsFetched, setIsAccountsFetched] = useState<boolean>(false);
  const [phrase, setPhrase] = useState('');

  const hideWalletDialog = () => setWalletDialog(false);
  const hideResetDialog = () => setResetWalletDialog(false);

  const createWalletHandler = async () => {
    setIsWalletCreating(true);
    const { mnemonic, ethAccounts, cosmosAccounts } = await createWallet();
    if (ethAccounts && cosmosAccounts) {
      setAccounts({
        ethAccounts: [...accounts.ethAccounts, ethAccounts],
        cosmosAccounts: [...accounts.cosmosAccounts, cosmosAccounts],
      });
      setWalletDialog(true);
      setIsWalletCreated(true);
      setPhrase(mnemonic);
    }
  };

  const confirmResetWallet = async () => {
    await resetWallet();
    setIsWalletCreated(false);
    setIsWalletCreating(false);
    setAccounts({
      ethAccounts: [],
      cosmosAccounts: [],
    });
    setCurrentIndex(0);
    hideResetDialog();
    setNetwork('eth');
  };

  const updateNetwork = (newNetwork: string) => {
    setNetwork(newNetwork);
    setCurrentIndex(0);
  };

  const updateIndex = (index: number) => {
    setCurrentIndex(index);
  };

  useEffect(() => {
    const fetchAccounts = async () => {
      if (isAccountsFetched) {
        return;
      }
      const { ethLoadedAccounts, cosmosLoadedAccounts } =
        await retrieveAccounts();

      if (ethLoadedAccounts && cosmosLoadedAccounts) {
        setAccounts({
          ethAccounts: ethLoadedAccounts,
          cosmosAccounts: cosmosLoadedAccounts,
        });

        setIsWalletCreated(true);
      }

      setIsAccountsFetched(true);
    };

    fetchAccounts();
  }, [isAccountsFetched, setAccounts]);

  return (
    <View style={styles.appContainer}>
      {!isAccountsFetched ? (
        <View style={styles.spinnerContainer}>
          <Text style={styles.LoadingText}>Loading...</Text>
          <ActivityIndicator size="large" color="#0000ff" />
        </View>
      ) : isWalletCreated ? (
        <>
          <NetworkDropdown
            selectedNetwork={network}
            updateNetwork={updateNetwork}
          />
          <View style={styles.accountComponent}>
            <Accounts
              network={network}
              currentIndex={currentIndex}
              updateIndex={updateIndex}
            />
          </View>
          <View style={styles.resetContainer}>
            <Button
              style={styles.resetButton}
              mode="contained"
              buttonColor="#B82B0D"
              onPress={() => {
                setResetWalletDialog(true);
              }}>
              Reset Wallet
            </Button>
          </View>
        </>
      ) : (
        <CreateWallet
          isWalletCreating={isWalletCreating}
          createWalletHandler={createWalletHandler}
        />
      )}
      <DialogComponent
        visible={walletDialog}
        hideDialog={hideWalletDialog}
        contentText={phrase}
      />
      <ResetWalletDialog
        visible={resetWalletDialog}
        hideDialog={hideResetDialog}
        onConfirm={confirmResetWallet}
      />
    </View>
  );
};

export default HomeScreen;