import React, { Component } from 'react';
import { View, TouchableOpacity } from 'react-native';
import Text from '../../components/Text';
import DateTimePicker from "react-native-modal-datetime-picker";
import Icon from 'src/components/Icon'
import { Appearance } from 'react-native-appearance';
import { t } from '../../utils/i18n'

const colorScheme = Appearance.getColorScheme();

export default class CustomDatePicker extends Component {
  constructor(props) {
    super(props);
    this.state = {
      isDateTimePickerVisible: false,
      select_date: new Date(),
      maxDate: this.props.maxDate == null && undefined,
      minDate: this.props.minDate == null && undefined,
      isDarkModeEnabled: colorScheme === 'dark'
    };
  }

  showDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: true });
  };

  hideDateTimePicker = () => {
    this.setState({ isDateTimePickerVisible: false });
  };

  handleDatePicked = date => {
    // console.log("A date has been picked: ", date);
    this.hideDateTimePicker();
    this.setState({select_date:date})
    return this.props.handleDate(date)
  };

  render() {
    return (
      <View style={{flex:1}}>
        <TouchableOpacity style={{height:48,backgroundColor:'#FFFFFF40',borderRadius:24,flexDirection:'row',alignItems:'center',justifyContent:'space-between',paddingHorizontal:10}}
        onPress={this.showDateTimePicker}>
          <Text style={{color:'white'}}>{this.props.titleText}</Text>
          <View style={{flexDirection:'row',alignItems:'center'}}>
            <Text style={{color:this.props.dateText == null || this.props.dateText == undefined ? '#FFFFFF40' : 'white'}}>{this.props.dateText == null || this.props.dateText == undefined ? t('select_date') : this.props.dateText}</Text>
            <Icon name={'ic_calendar_alt'} size={16} style={{ marginLeft:7,}} color={'white'} />
          </View>
        </TouchableOpacity>
        <DateTimePicker
            date={this.state.select_date}
            isVisible={this.state.isDateTimePickerVisible}
            onConfirm={this.handleDatePicked}
            onCancel={this.hideDateTimePicker}
            maximumDate={this.props.maxDate}
            minimumDate={this.props.minDate}
            isDarkModeEnabled={this.state.isDarkModeEnabled}
          />
      </View>
    );
  }
}