import React, { useState } from 'react';
import { View } from 'react-native';
import { List } from 'react-native-paper';

import { NetworkDropdownProps } from '../types';
import styles from '../styles/stylesheet';

const NetworkDropdown = ({ updateNetwork }: NetworkDropdownProps) => {
  const [expanded, setExpanded] = useState<boolean>(false);
  const [selectedNetwork, setSelectedNetwork] = useState<string>('Ethereum');

  const handleNetworkPress = (network: string, displayName: string) => {
    updateNetwork(network);
    setSelectedNetwork(displayName);
    setExpanded(false);
  };

  return (
    <View style={styles.networkDropdown}>
      <List.Accordion
        title={selectedNetwork}
        expanded={expanded}
        onPress={() => setExpanded(!expanded)}>
        {networks.map(network => (
          <List.Item
            key={network.value}
            title={network.displayName}
            onPress={() =>
              handleNetworkPress(network.value, network.displayName)
            }
          />
        ))}
      </List.Accordion>
    </View>
  );
};

const networks = [
  { value: 'eth', displayName: 'Ethereum' },
  { value: 'cosmos', displayName: 'Cosmos' },
];

export { NetworkDropdown };