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

export class CustomDatePicker extends Component {

  render() {
    const 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, ...styles.date_time_reservation, height: '100%',justifyContent:'center', alignItems:'flex-end', paddingRight:25 }}>
          <DatePicker

            // defaultDate={new Date()}
            locale={'en'}
            timeZoneOffsetInMinutes={undefined}
            modalTransparent={false}
            animationType={'fade'}
            androidMode={'default'}
            placeholder={props.placeholder}

            textStyle={{ color: 'white', fontSize: 14, fontFamily: 'Prompt-Regular' }}
            placeHolderTextStyle={{ color: '#d3d3d3'  }}
            {...props}
          // onDateChange={this.setDate}
          />

          {/* <TextInput style={[{textAlign: 'right'}, props.style]}
                     secureTextEntry={props.secureTextEntry}
                     textAlign={props.inputTextAlign || 'right'}
                     {...props}
                     placeholder={props.placeholder} value={props.value}/>*/}
        </View>
        <View style={{
          height: '100%',
          position: 'absolute',
          justifyContent: 'center',
          alignItems: 'center',
          right: 15,
          zIndex: 0
        }}>
          <Icon name={'ic_calendar_alt'} size={16} iconStyle={{ zIndex: 0, }} color={'white'} />
        </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
  },
  date_time_reservation: {
    marginLeft: 5,
    marginRight: 0,
    width: '100%',
    height: 40,
    borderRadius: 5,
    display: 'flex',
    alignItems: 'center',
    backgroundColor: 'transparent',
    position: 'relative',
    zIndex: 5,
  },
}

