import React, { useState } from 'react';
import { View } from 'react-native';
import { Text, Button, Dialog, Portal } from 'react-native-paper';

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

import { createWallet, resetWallet } from '../utils';
import { DialogComponent } from './Dialog';
import { NetworkDropdown } from './NetworkDropdown';
import { StackParamsList, Account } from '../types';

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

  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 [currentAccount, setCurrentAccount] = useState<Account>();
  const [ethAccount, setEthAccount] = useState<Account>();
  const [cosmosAccount, setCosmosAccount] = useState<Account>();

  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();

    setEthAccount(ethWalletInfo);
    setCosmosAccount(cosmosWalletInfo);
    setCurrentAccount(ethWalletInfo);
    setWalletDialog(true);
    setIsWalletCreated(true);
  };

  const confirmResetWallet = async () => {
    await resetWallet();
    setIsWalletCreated(false);
    setIsWalletCreating(false);
    hideResetDialog();
  };

  const updateNetwork = (newNetwork: string) => {
    setNetwork(newNetwork);
    switch (newNetwork) {
      case 'eth':
        setCurrentAccount(ethAccount);
        break;
      case 'cosmos':
        setCurrentAccount(cosmosAccount);
        break;
      default:
        console.error('Error updating network');
    }
  };

  return (
    <View 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}
          />
          <Text variant="headlineSmall">Account 1</Text>
          <View style={{ marginTop: 15, marginBottom: 15 }}>
            <Text variant="bodyLarge">
              <Text style={{ fontWeight: '700' }}>Address: </Text>
              {currentAccount && currentAccount.address}
            </Text>
            <Text variant="bodyLarge">
              <Text style={{ fontWeight: '700' }}>Public Key: </Text>
              {currentAccount && currentAccount.pubKey}
            </Text>
          </View>

          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
            <View
              style={{
                marginTop: 20,
                marginRight: 10,
                width: 150,
                alignSelf: 'center',
              }}>
              <Button
                mode="contained"
                onPress={() => {
                  navigation.navigate('SignMessage', {
                    selectedNetwork: network,
                  });
                }}>
                Sign Message
              </Button>
            </View>
            <View style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
              <Button
                mode="contained"
                buttonColor="#B82B0D"
                onPress={async () => {
                  setResetWalletDialog(true);
                }}>
                Reset Wallet
              </Button>
            </View>
          </View>
        </View>
      ) : (
        <View>
          <Text variant="headlineSmall">Create Wallet</Text>
          <View style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
            <Button
              mode="contained"
              loading={isWalletCreating}
              onPress={createWalletHandler}>
              {isWalletCreating ? 'Creating' : 'Create'}{' '}
            </Button>
          </View>
        </View>
      )}
    </View>
  );
};

export { HomeScreen };