/**
 * React Native Full App (https://store.enappd.com/product/react-native-full-app)
 *
 * Copyright © 2019-present Enappd. All rights reserved.
 *
 * This source code is licensed as per the terms found in the
 * LICENSE.md file in the root directory of this source tree.
 */

import React, { Component } from 'react';
import { Picker, Icon, View } from 'native-base';
import styles from './styles';

interface PickerComponentProps {
  jsonList: Array<any>;
  onSelectChange: (selected: any) => void;
  selectedValue: any;
}
const PickerComponent = (props: PickerComponentProps) => {
  const { jsonList } = props;
  return (
    <View style={[styles.picker]}>
      <Picker
        style={{ width: '100%', zIndex: 2 }}
        placeholderStyle={{ maxWidth: '100%', paddingHorizontal: 0 }}
        textStyle={{
          maxWidth: '100%',
          paddingHorizontal: 0,
          textAlign: 'left',
        }}
        onValueChange={props.onSelectChange}
        selectedValue={props.selectedValue}
        iosIcon={<Icon name="md-arrow-dropdown" style={{ zIndex: 5 }}></Icon>}
      >
        {/* {jsonList.map((el,index) => (<Picker.Item key={index} label={el.dial_code} value={el.dial_code}/>))} */}
        {jsonList.map((item: any, i: number) => {
          return (
            <Picker.Item
              key={i}
              label={item.dial_code + ' ' + item.name}
              value={item.code}
            />
          );
        })}
      </Picker>
    </View>
  );
};
export default PickerComponent;
