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

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

const NetworkDropdown: React.FC<NetworkDropdownProps> = ({
  updateNetwork,
}) => {
  const [expanded, setExpanded] = useState<boolean>(false);
  const [title, setTitle] = useState<string>('Ethereum');

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

  return (
    <View style={{ marginBottom: 20 }}>
      <List.Accordion
        title={title}
        expanded={expanded}
        onPress={expandNetworks}>
        <List.Item
          title="Ethereum"
          onPress={() => {
            updateNetwork('eth');
            setTitle('Ethereum');
            setExpanded(false);
          }}
        />
        <List.Item
          title="Cosmos"
          onPress={() => {
            updateNetwork('cosmos');
            setTitle('Cosmos');
            setExpanded(false);
          }}
        />
      </List.Accordion>
    </View>
  );
};

export { NetworkDropdown };