import React, { useState } from 'react';
import { Alert, View } from 'react-native';
import { Button } from 'react-native-paper';

import { createWallet, resetWallet } from '../utils';
import { DialogComponent } from './Dialog';
import { NetworkDropdown } from './NetworkDropdown';
import { Account, AccountsState } from '../types';
import Accounts from './Accounts';
import CreateWallet from './CreateWallet';
import ResetWalletDialog from './ResetWalletDialog';
import styles from '../styles/stylesheet';

const HomeScreen = () => {
  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 [phrase, setPhrase] = useState('');

  const [accounts, setAccounts] = useState<AccountsState>({
    ethAccounts: [],
    cosmosAccounts: [],
  });

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

  const createWalletHandler = async () => {
    setIsWalletCreating(true);
    await new Promise(resolve => setTimeout(resolve, 2000));
    const { mnemonic, ethAccounts, cosmosAccounts } = await createWallet();
    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);
  };

  const updateAccounts = (account: Account) => {
    switch (network) {
      case 'eth':
        setAccounts({
          ...accounts,
          ethAccounts: [...accounts.ethAccounts, account],
        });
        break;
      case 'cosmos':
        setAccounts({
          ...accounts,
          cosmosAccounts: [...accounts.cosmosAccounts, account],
        });
        break;
      default:
        Alert.alert('Select a valid network!');
    }
  };
  return (
    <View style={styles.appContainer}>
      <DialogComponent
        visible={walletDialog}
        hideDialog={hideWalletDialog}
        contentText={phrase}
      />
      <ResetWalletDialog
        visible={resetWalletDialog}
        hideDialog={hideResetDialog}
        onConfirm={confirmResetWallet}
      />

      {isWalletCreated ? (
        <>
          <NetworkDropdown
            selectedNetwork={network}
            updateNetwork={updateNetwork}
          />
          <View style={styles.accountComponent}>
            <Accounts
              network={network}
              accounts={accounts}
              currentIndex={currentIndex}
              updateIndex={updateIndex}
              updateAccounts={updateAccounts}
            />
          </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}
        />
      )}
    </View>
  );
};

export default HomeScreen;