import React, { useState } from 'react';
import { Alert, ScrollView, View } from 'react-native';
import { Text, Button, Dialog, Portal } 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';

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 [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 { ethWalletInfo, cosmosWalletInfo } = await createWallet();
    ethWalletInfo &&
    cosmosWalletInfo &&
    setAccounts({
      ethAccounts: [...accounts.ethAccounts, ethWalletInfo],
      cosmosAccounts: [...accounts.cosmosAccounts, cosmosWalletInfo],
    });
    setWalletDialog(true);
    setIsWalletCreated(true);
  };

  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 (
    <ScrollView style={{ marginTop: 24, paddingHorizontal: 24 }}>
      <DialogComponent
        visible={walletDialog}
        hideDialog={hideWalletDialog}
        contentText="Wallet created"
      />
      <Portal>
        <Dialog visible={resetWalletDialog} onDismiss={hideResetDialog}>
          <Dialog.Title>Reset Wallet</Dialog.Title>
          <Dialog.Content>
            <Text variant="bodyMedium">Are you sure?</Text>
          </Dialog.Content>
          <Dialog.Actions>
            <Button textColor="red" onPress={confirmResetWallet}>
              Yes
            </Button>
            <Button onPress={hideResetDialog}>No</Button>
          </Dialog.Actions>
        </Dialog>
      </Portal>
      {isWalletCreated ? (
        <View>
          <NetworkDropdown
            selectedNetwork={network}
            updateNetwork={updateNetwork}
          />
          <Accounts
            network={network}
            accounts={accounts}
            currentIndex={currentIndex}
            updateIndex={updateIndex}
            updateAccounts={updateAccounts}
          />
          <View style={{ marginTop: 300, alignSelf: 'center' }}>
            <Button
              mode="contained"
              buttonColor="#B82B0D"
              onPress={async () => {
                setResetWalletDialog(true);
              }}>
              Reset Wallet
            </Button>
          </View>
        </View>
      ) : (
        <View>
          <View style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
            <Button
              mode="contained"
              loading={isWalletCreating}
              onPress={createWalletHandler}>
              {isWalletCreating ? 'Creating' : 'Create Wallet'}{' '}
            </Button>
          </View>
        </View>
      )}
    </ScrollView>
  );
};

export { HomeScreen };