import React,{ Component } from 'react'
import {StyleSheet,Text,View,TouchableOpacity,TextInput} from 'react-native'
import CardView from 'react-native-cardview'
import {responsiveWidth,responsiveHeight} from 'react-native-responsive-dimensions'
import Button from 'apsl-react-native-button'
import {} from 'react-native'
import DateTimePicker from 'react-native-modal-datetime-picker';
let moment=require('moment');
let theme=require('./../../utils/theme.json');


export default class DateFilterHistoryDemand extends Component{
    static  navigatorStyle={
        navBarHidden:true,
    };
    state = {
        isDateTimePickerVisible: false,

        isDateEndTimePickerVisible: false,
        datestart:null,
        datestartformated:'La date de debut',
        dateend:null,
        dateendformated:'La date de fin'
    };
    constructor(props){
        super(props);
    }
    _showDateTimePicker = (type) => {
      if(type===1)
        this.setState({isDateTimePickerVisible: true
    } );
      else  this.setState({isDateEndTimePickerVisible: true
      } );
}
    _showDateEndPicker= ()=>this.setState({isDateEndTimePickerVisible:true});
    _hideDateTimePicker = () => this.setState({ isDateTimePickerVisible: false,isDateEndTimePickerVisible:false });
    _handleDatePicked = (date) => {
        if(this.state.isDateTimePickerVisible){
            this.setState({datestart:date,datestartformated:moment(date).format('dddd Do ,MMMM YYYY')});
        }else if(this.state.isDateEndTimePickerVisible){
            let startdate=this.state.datestart;
            let enddate=moment(date);
            this.setState({dateend:date,dateendformated:moment(date).format('dddd Do ,MMMM YYYY')});

            let dif=moment(enddate).diff(startdate);
            if(dif<0){
                this.props.navigator.showSnackbar({
                    text:'la date de fin ne peut être plus petite que la date de début',
                    duration:'long',
                    backgroundColor:'red',
                    textColor:'white'
                })
            }
        }
        this._hideDateTimePicker();
    };


    render(){
        return(<View style={styles.root}>
            <CardView style={styles.container}>
                <Text style={styles.title}>Trié selon la durée</Text>
                <View style={styles.content}>
                    <Text style={styles.titlecontent}>Définir la date de début</Text>

                    <TouchableOpacity onPress={()=>this._showDateTimePicker(1)}>
                        <View>
                            <Text style={styles.dateText}>{this.state.datestartformated}</Text>
                        </View>
                    </TouchableOpacity>
                    <DateTimePicker
                        isVisible={this.state.isDateTimePickerVisible || this.state.isDateEndTimePickerVisible}
                        onConfirm={this._handleDatePicked}
                        onCancel={this._hideDateTimePicker}
                    />
                    <Text style={styles.titlecontent}>Définir la date de fin</Text>
                    <TouchableOpacity onPress={()=>this._showDateEndPicker(2)}>
                        <View>
                            <Text style={styles.dateText}>{this.state.dateendformated}</Text>
                        </View>
                    </TouchableOpacity>

                </View>
                <View style={styles.btnStyleContainer}>
                    <Button style={styles.btnvalid}>ANNULER</Button>
                    <Button style={styles.btnvalid} textStyle={styles.btnfilter}>FILTRER</Button>
                </View>

            </CardView>
        </View>)
    }
}
const styles=StyleSheet.create({
    container:{
        height:responsiveHeight(60),
        width:responsiveWidth(90),
        backgroundColor:'white'

    },
    dateText:{
        marginTop:20,
        marginLeft:responsiveWidth(13),
        marginBottom:20,
        fontSize:17,
    },
    titlecontent:{
        fontSize:17,
        marginLeft:responsiveWidth(10),

        color:'black'
    },
    content:{
      flex:8
    },
    btnvalid:{
      flex:1,

      borderColor:'transparent'
    },

    btnfilter:{
        flex:1,
        color:theme.accent,
        fontWeight:'bold',
        borderColor:'transparent'
    },
    btnStyleContainer:{
      width:responsiveWidth(50),
      alignSelf:'flex-end',
        flexDirection:'row'
    },
    title:{
      fontSize:20,
      marginLeft:20,
      marginTop:20,
        color:'black',
        fontWeight:'bold'
    },
    root:{
        flex:1,
        backgroundColor:'rgba(0,0,0,0.3)',
        justifyContent:'center',
        alignItems:'center'
    }
})