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

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

const HomeScreen = () => {
  const [message, setMessage] = useState<string>('');
  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  hideWalletDialog = () => setWalletDialog(false);

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

  return (
    <View style={{ marginTop: 24, paddingHorizontal: 24 }}>
      <DialogComponent visible={walletDialog} hideDialog={hideWalletDialog} contentText="Wallet created" />
      {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>

          <Text variant="headlineSmall" >Sign a Message</Text>
          <View style={{ marginTop: 32, paddingHorizontal: 24 }}>
            <TextInput mode="outlined"
              placeholder="Enter your message"
              onChangeText={text => setMessage(text)}
              value={message}
            />
            <View
              style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
              <Button
                mode="contained"
                onPress={() => {
                  signMessage(message);
                }}
              >Sign Message</Button>
            </View>
          </View>

          <View style={{ marginTop: 100 }}>
            <View
              style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
              <Button
                mode="contained"
                buttonColor="#B82B0D"
                onPress={async () => {
                  await resetWallet();
                  setIsWalletCreated(false);
                  setWallet(null);
                  setIsWalletCreating(false);
                }}
              >Reset Wallet</Button>
            </View>
          </View>
        </View>
      ) : (
        <View>
          <Text variant="headlineSmall" >Create Wallet</Text>
          <View style={{ marginTop: 20, width: 150, alignSelf: 'center' }}>
            <Button
              buttonColor="#37A640"
              mode="contained"
              loading={isWalletCreating}
              onPress={createWallet}
            >{isWalletCreating ? 'Creating' : 'Create'} </Button>
          </View>
        </View>
      )}
    </View>
  )
}

export { HomeScreen };