import React, { useState } from 'react';
import { View } from 'react-native';
import { Text, Button, Dialog, Portal } from 'react-native-paper';
import { HDNode } from 'ethers/lib/utils';

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

import { generateWallet, resetWallet } from '../utils';
import { DialogComponent } from './Dialog';

const HomeScreen = () => {
  const navigation = useNavigation();

  const [isWalletCreated, setIsWalletCreated] = useState<boolean>(false);
  const [wallet, setWallet] = useState<HDNode | null>();
  const [isWalletCreating, setIsWalletCreating] = useState<boolean>(false);
  const [walletDialog, setWalletDialog] = useState<boolean>(false);
  const [resetWalletDialog, setResetWalletDialog] = useState<boolean>(false);

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

  const createWallet = async () => {
    setIsWalletCreating(true);
    await new Promise(resolve => setTimeout(resolve, 200));
    const etherWallet = await generateWallet();
    setWalletDialog(true);
    if (etherWallet) {
      setWallet(etherWallet);
      setIsWalletCreated(true);
    }
  };

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

  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>
          <Text variant="headlineSmall">Account1</Text>
          <View style={{ marginTop: 15, marginBottom: 15 }}>
            <Text variant="bodyLarge">
              <Text style={{ fontWeight: '700' }}>Address: </Text>
              {wallet && wallet.address.toString()}
            </Text>
            <Text variant="bodyLarge">
              <Text style={{ fontWeight: '700' }}>Public Key: </Text>
              {wallet && wallet.publicKey.toString()}
            </Text>
          </View>
          <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
            <View
              style={{
                marginTop: 20,
                marginRight: 10,
                width: 150,
                alignSelf: 'center',
              }}>
              <Button
                mode="contained"
                onPress={() => {
                  navigation.navigate('Sign Message' as never);
                }}>
                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={createWallet}>
              {isWalletCreating ? 'Creating' : 'Create'}{' '}
            </Button>
          </View>
        </View>
      )}
    </View>
  );
};

export { HomeScreen };