import React, { Component } from 'react'
import {  TextInput, View, Platform } from 'react-native'
import Icon from 'src/components/Icon'
import { Picker } from 'native-base'
import Text from 'src/components/Text'

export class CustomPicker extends Component {

  render() {
    let props = this.props

    return (
      <View style={[styles.container, props.style]}>
        {props.iconName && <View style={styles.icon}>
          <Icon name={props.iconName} size={16} color={props.iconColor || 'rgba(0, 0, 0, 0.5)'}> </Icon>
        </View>
        }
        {props.labelName && <View style={styles.icon}>
          <Text style={{color:  props.labelColor || 'rgba(0, 0, 0, 0.5)'}}>{props.labelName}</Text>
        </View>
        }

        <View style={{flex: 1}}>

          <Picker
            {...props}
            mode="dropdown"
            headerBackButtonText=""
            style={styles.picker}    
            itemStyle={styles.pickerItem}
           // textStyle={{ color:'red'}}
            // textAlign={props.inputTextAlign || 'right'}
            // selectedValue={}
            // onValueChange={this.onValueChange.bind(this)}
          >
            {Platform.OS === 'android' &&
            <Picker.Item color='rgba(0, 0, 0, 0.5)'  label={props.placeholder}  value={null}/>
            }
            {(props.dataSource && props.dataSource.length > 0) &&
            props.dataSource.map((item, index) => {
              return (<Picker.Item key={index} label={item.label} value={item.value}/>)
            })
            }

          </Picker>


        </View>
      </View>
    )
  }
}

const styles = {
  container: {
    flexGrow: 1,
    flexDirection: 'row',
    borderRadius: 5,
    height: 40,
    maxHeight: 48,
    minHeight: 40,
    paddingHorizontal: 5,
    backgroundColor: '#FFF'
  },
  icon: {
    justifyContent: 'center',
    // alignItems: '',
    // flex: 1,
    paddingLeft: 5,
    paddingRight: 5
  },
  input: {
    // width: 100,
    // alignItems: 'flex-start',
    color: 'rgba(0, 0, 0, 0.5)',
    overflow: 'hidden',
    fontSize: 14
  },
  picker: {
   
    color:'white',
    flex: 1,
    // marginTop: -6
    marginVertical: 0,
    // padding: 0,
    // justifyContent: 'center',
    // alignItems: 'center'
  },
  pickerItem: {
    // flex: 1,
    // marginTop: -6
    // marginVertical: 0,
    // padding: 0,
    // justifyContent: 'center',
    // alignItems: 'center',
    // backgroundColor: 'red',
    textAlign: 'center',
    color: 'blue'
  }
}
