import React, { useState } from 'react';
import { TouchableOpacity, View } from 'react-native';
import { Button, List, Text, useTheme } from 'react-native-paper';
import { useNavigation } from '@react-navigation/native';
import { NativeStackNavigationProp } from '@react-navigation/native-stack';
import { AccountsProps, StackParamsList, Account } from '../types';
import { addAccount } from '../utils/Accounts';
import styles from '../styles/stylesheet';
import HDPathDialog from './HDPathDialog';

const Accounts = ({
  network,
  accounts,
  updateAccounts,
  currentIndex,
  updateIndex: updateId,
}: AccountsProps) => {
  const navigation =
    useNavigation<NativeStackNavigationProp<StackParamsList>>();
  const [expanded, setExpanded] = useState(false);
  const [isAccountCreating, setIsAccountCreating] = useState(false);
  const [hdDialog, setHdDialog] = useState(false);
  const [pathCode, setPathCode] = useState('');
  const theme = useTheme();

  const handlePress = () => setExpanded(!expanded);

  const addAccountHandler = async () => {
    setIsAccountCreating(true);
    const newAccount = await addAccount(network);
    setIsAccountCreating(false);
    if (newAccount) {
      updateAccounts(newAccount);
      updateId(newAccount.counterId);
    }
  };

  const selectedAccounts: Account[] = (() => {
    switch (network) {
      case 'eth':
        return accounts.ethAccounts;
      case 'cosmos':
        return accounts.cosmosAccounts;
      default:
        return [];
    }
  })();

  const renderAccountItems = () =>
    selectedAccounts.map(account => (
      <List.Item
        key={account.counterId}
        title={`Account ${account.counterId + 1}`}
        onPress={() => {
          updateId(account.counterId);
          setExpanded(false);
        }}
      />
    ));

  return (
    <View>
      <HDPathDialog
        visible={hdDialog}
        hideDialog={() => setHdDialog(false)}
        updateAccounts={updateAccounts}
        updateIndex={updateId}
        pathCode={pathCode}
      />
      <List.Accordion
        title={`Account ${currentIndex + 1}`}
        expanded={expanded}
        onPress={handlePress}>
        {renderAccountItems()}
      </List.Accordion>

      <View style={styles.addAccountButton}>
        <Button
          mode="contained"
          onPress={addAccountHandler}
          loading={isAccountCreating}>
          {isAccountCreating ? 'Adding' : 'Add Account'}
        </Button>
      </View>

      <View style={styles.addAccountButton}>
        <Button
          mode="contained"
          onPress={() => {
            setHdDialog(true);
            setPathCode(network === 'eth' ? "m/44'/60'/" : "m/44'/118'/");
          }}>
          Add Account from HD path
        </Button>
      </View>

      <View style={styles.accountContainer}>
        <Text variant="bodyLarge">
          <Text style={styles.highlight}>Address: </Text>
          {selectedAccounts[currentIndex]?.address}
        </Text>
        <Text variant="bodyLarge">
          <Text style={styles.highlight}>Public Key: </Text>
          {selectedAccounts[currentIndex]?.pubKey}
        </Text>
        <Text variant="bodyLarge">
          <Text style={{ fontWeight: '700' }}>HD Path: </Text>
          {selectedAccounts[currentIndex]?.hdPath}
        </Text>
      </View>

      <View style={styles.signLink}>
        <TouchableOpacity
          onPress={() => {
            navigation.navigate('SignMessage', {
              selectedNetwork: network,
              accountInfo: selectedAccounts[currentIndex],
            });
          }}>
          <Text
            variant="titleSmall"
            style={[styles.hyperlink, { color: theme.colors.primary }]}>
            Sign Message
          </Text>
        </TouchableOpacity>
      </View>
    </View>
  );
};

export default Accounts;