import React, { Component } from 'react';
import { View } from 'react-native';
import { Dropdown } from 'react-native-material-dropdown-v2';
import axios from 'axios';



export default class CountryList extends Component {
  constructor(props) {
    super(props);

    this.state = {
      dropdownOptions: [],
      hasLoadActivePayCountryNetworkList: false,
      selectedValue: null,
      paysDestinationSelect: null,
    };
  }

  componentDidMount() {
    this.fetchData();
  }

  fetchData = async () => {
    try {
      const response = await axios.get('https://api.countrystatecity.in/v1/countries', {
        headers: {
          'X-CSCAPI-KEY': 'API_KEY'
        }
      });
      // Mettre à jour les options de la liste déroulante dans l'état
      this.setState({ dropdownOptions: response.data });
    } catch (error) {
      console.error('Erreur lors de la récupération des options de la liste déroulante:', error);
    }
  };

  render() {
    const { dropdownOptions } = this.state;

    return (
      <View>
  
          <Dropdown
                            label={I18n.t('SELECT_COUNTRY')}
                            //data={this.state.paysDestination}
                            data={dropdownOptions}
                            useNativeDriver={true}
                            //value={this.state.paysDestinationSelect === null ? '' : this.state.paysDestinationSelect}
                            value={selectedValue}
                            //onChangeText={this.handleValueChange}
                            onChangeText={(value, index, data) => {
                               // this.props.getPayCountryNetworkReset();

                                let countrySelect = data.filter(element => element.name === value);
                                this.setState({
                                    paysDestinationSelect: value,
                                    hasLoadActivePayCountryNetworkList: true
                                }) 
                              //  () => {
                              //       this.props.getPayCountryNetworkAction({
                              //           id_wallet_user: this.state.wallet.id,
                              //           id_country: countrySelect[0].id
                              //       });
                              //   });
                              //   this.props.getCommissionUserWalletToWalletReset();
                           }
                          }
                            valueExtractor={(value) => {
                                return value.name
                            }}
                            labelExtractor={(value) => {
                                return value.name
                            }}
                        />
      </View>
    );
  }
}