test

import _ from 'lodash';
import React, { Component } from 'react';
import { AppRegistry, View, Text, Image, ScrollView, TextInput, Switch, KeyboardAvoidingView, LayoutAnimation,  TouchableWithoutFeedback, Keyboard, Dimensions } from 'react-native';
import Card from './../Card/Card';
import CardSection from './../CardSection/index';
import CardSection2 from './../CardSection2/index';
import CardSectionInput from './../CardSectionInput/index';
import Input from './../Input/index';
import Button from './../Button/index';
import Header from './../Header/index';
import DatePicker from 'react-native-datepicker';
import SliderCarSeats from './../SliderCarSeats/index';
import CarView from './../CarView/index';
import { KeyboardAwareScrollView } from 'react-native-keyboard-aware-scroll-view'
//import SegmentedControlTab from 'react-native-segmented-control-tab';
//import Routes from './../config/routes';
import GoogleAutoComplete from './../GoogleAutoComplete/index';
import { connect } from 'react-redux';
import { DriverAddForm, ridesFetch } from './../../actions';

const rightNow = new Date();
const currentDate = rightNow.toISOString().slice(0,10).replace(/-/g,"-");
const widthScreen = Dimensions.get('window').width;

console.log(currentDate);

class MyTrip extends Component {

      constructor(props) {

          super(props);
        this.RoundTrip = this.RoundTrip.bind(this);
        this.props.ridesFetch();
        console.log('reg props are', this.props);
      }

    shouldComponentUpdate(nextProps) {
        if (this.props !== nextProps) {
            console.log('updating with', nextProps);
            return true;
        }
    }
    componentWillUpdate() {
        LayoutAnimation.spring();

    }

    onFromChange(text) {
        this.props.fromChanged(text);
    }

    RoundTrip = () => {

        console.log('value of round trip ' + JSON.stringify(this.props));
        var roundTrip = this.props.roundTrip;
        if (roundTrip) {
            console.log('return is true')

            return (
            <View style={{paddingLeft: 15}}>
                         <CardSectionInput>


                     <Image
                         source={require('./../../images/dateIcon1.png')}
                         style={styles.IconStyle}
                     />
                     <DatePicker
                 style={styles.DateStyle}
                 date={this.props.returnDate}
                 mode='datetime'
                 format="LLLL"
                 minDate={currentDate}
                 maxDate="2018-06-01"
                 confirmBtnText="Confirm"
                 cancelBtnText="Cancel"
                 showIcon={false}
                 placeholder='Return'
                 onDateChange={text => this.props.DriverAddForm({ prop: 'returnDate', value: text })}
                 customStyles={{
                 dateInput: {
                     marginLeft: 2,
                     backgroundColor: 'white',
                     borderWidth: 1,
                     borderRadius: 5,
                     borderColor: 'white',
                     flex: 1,
                     flexDirection: 'row',
                 },
                 dateText: {
                     flexDirection: 'row',
                     flex: 1,
                     backgroundColor: 'transparent',
                     color: 'black',
                 },
                 placeholderText: {
                     color: '#c9c9c9',
                     alignSelf: 'center',
                     justifyContent: 'flex-start',
                     flex: 1,
                     flexDirection: 'row',
                     fontSize: 18,
                        }
                    }}
                     />
         </CardSectionInput>
      </View>
            );
        };
        }
   handleIndexChange = (index) => {
       this.setState({
        ...this.state,
        selectedIndex: index,
      });
       if (index == 1) {
        const { navigate } = this.props.navigation;
       navigate('DriverExtraInfo')
       console.log('navigating to driverinfo');
    }
    else if (index == 0) {
        const { navigate } = this.props.navigation;
        navigate('PostARide')
         console.log('navigating to PostARide');
    }

   }

  render() {
      console.log('printing pros', this.props);
      const { rides } = this.props;

if (rides) {
    return rides.map((ride, i) => {
        if (i === 0 && ride.food) {
            return <Text> value of round is {ride.food} </Text>;
        }

        return <Text> rr </Text>;
    });
}

return (
<KeyboardAwareScrollView>
 <TouchableWithoutFeedback onPress={Keyboard.dismiss}>
    <View style={{flexDirection: 'column', flex: 1}}>
            <View style={{ flexDirection: 'column', paddingTop: 20 }}>
        <View style={{justifyContent: 'center',}}>
        <CardSectionInput>
                <Image
                    source={require('./../../images/locationIcon.png')}
                    style={styles.IconStyle}
                />

                <GoogleAutoComplete
            placeholder='Start'
            placeHol="Start"
            minLength={2}
            autoFocus={false}
            returnKeyType={'default'}
            fetchDetails
            getDefaultValue={() => this.props.startGoogle}
            onPress={(value) => this.props.DriverAddForm({ prop: 'startGoogle', value: value.description })}
            styles={{
                textInputContainer: {
                    backgroundColor: 'white',
                    borderTopWidth: 0,
                    borderBottomWidth:0,
                    paddingLeft: 0
                },
                textInput: {
                    marginLeft: 0,
                    marginRight: 0,
                    height: 38,
                    color: 'white',
                    fontSize: 16
                },
                predefinedPlacesDescription: {
                    color: '#1faadb'
                },

            }}
            currentLocation={false}
        />
    </CardSectionInput>
             <CardSectionInput>

                <Image
                    source={require('./../../images/locationIcon2.png')}
                    style={styles.IconStyle}
                />

                <GoogleAutoComplete
            placeholder='Start'
            placeHol="Stopover"
            minLength={2}
            autoFocus={false}
            returnKeyType={'default'}
            fetchDetails
            getDefaultValue={() => this.props.stopOverGoogle}
            onPress={(value) => this.props.DriverAddForm({ prop: 'stopOverGoogle', value: value.description })}
            styles={{
                textInputContainer: {
                backgroundColor: 'white',
                borderTopWidth: 0,
                borderBottomWidth:0
                },
                textInput: {
                marginLeft: 0,
                marginRight: 0,
                height: 38,
                color: 'white',
                fontSize: 16
                },
                predefinedPlacesDescription: {
                color: '#1faadb'
                },
            }}
            currentLocation={false}
                />
                {/*<Button
                onPress={() => this.props.carsPost({ prop: 'make', value: 'toyota' })}
                > Hello </Button>*/}
    </CardSectionInput>
         <CardSectionInput>

                <Image
                    source={require('./../../images/markerIcon.png')}
                    style={styles.IconStyle}
                />

                <GoogleAutoComplete
            placeHol="End"
            minLength={2}
            autoFocus={false}
            returnKeyType={'default'}
            setAddressText="efef"
            fetchDetails
            text={this.props.endGoogle}
            setAddressText={this.props.endGoogle}
            getDefaultValue={() => this.props.endGoogle}
            onPress={(value) => this.props.DriverAddForm({ prop: 'endGoogle', value: value.description })}
            styles={{
                textInputContainer: {
                backgroundColor: 'white',
                borderTopWidth: 0,
                borderBottomWidth:0
                },
                textInput: {
                marginLeft: 0,
                marginRight: 0,
                height: 38,
                color: 'white',
                fontSize: 16
                },
                predefinedPlacesDescription: {
                color: '#1faadb'
                },

                }}
                currentLocation={false}
                />

    </CardSectionInput>

        <CardSectionInput>
           <View style={{flexDirection:'row'}}>
             <Image style={styles.IconStyle}/>
             <View style={styles.rountripView }>
            <Text style={styles.roundTrip}> Round Trip </Text>
            <View style={{backgroundColor: 'white', justifyContent: 'center'}}>
                <Switch
                onValueChange={text => this.props.DriverAddForm({ prop: 'roundTrip', value: text })}
                value={this.props.roundTrip}
                />

            </View>
            </View>
           </View>
            </CardSectionInput>
              {this.RoundTrip()}
            {/*<Text>  {this.props.rides && this.props.rides.length > 0 && this.props.rides[0].food ?  this.props.rides[0].food ? '' } </Text>*/}
    <CardSectionInput>



            <Image
                source={require('./../../images/dateIcon1.png')}
                style={styles.IconStyle}
            />
            <DatePicker
        style={styles.DateStyle}
        date={this.props.date}
        mode='datetime'
        onDateChange={text => this.props.DriverAddForm({ prop: 'date', value: text })}
        format="LLLL"
        minDate={currentDate}
        maxDate="2018-06-01"
        confirmBtnText="Confirm"
        cancelBtnText="Cancel"
        showIcon={false}
        placeholder='Departure'
        customStyles={{
          dateInput: {
            marginLeft: 2,
            backgroundColor: 'white',
            borderWidth: 1,
            borderRadius: 5,
            borderColor: 'white',
            flex: 1,
            flexDirection: 'row',
          },
          dateText: {
            flexDirection: 'row',
            flex: 1,
            backgroundColor: 'transparent',
            color: 'black',
          },
           placeholderText: {
             color: '#c9c9c9',
             alignSelf: 'center',
             justifyContent: 'flex-start',
             flex: 1,
             flexDirection: 'row',
             fontSize: 18,

       }
        }}

      />


</CardSectionInput>
 {/*<Text> Carseats are {this.props.carSeats} </Text>*/}
<CardSectionInput>

    <Image style={styles.FakeIconStyle}/>
    <SliderCarSeats
    ref="sliderParent"
    onValueChange={value => this.props.DriverAddForm({prop: 'carSeat', value: value })}
    value={2}
    />

</CardSectionInput>
     <CardSectionInput>
            <Image
                source={require('./../../images/cashIcon.png')}
                style={styles.IconStyle}
            />
            <Input
                style={styles.inputStyle}
                onChangeText={text => this.props.DriverAddForm({prop: 'costPerSeat', value: text })}
                value={this.props.costPerSeat}
                autoCorrect={false}
                placeholder='Cost per Seat'
                keyboardType={'numeric'}

            />
        </CardSectionInput>



             {/*<CarView />*/}



        </View>
    </View>

    {/*<Text> Value of redux from is {this.props.from} </Text>
    <Text> Start Google : {this.props.startGoogle} </Text>
     <Text> Seats available: {this.props.carSeat} </Text>
     <Text> Seats available: {this.props.seatAvailable} </Text>


    <Text> stopover: {this.props.stopOverGoogle} </Text>


    <Text> roundTrip: {String(this.props.roundTrip)}</Text>
    <Text> date: {this.props.date} </Text>
    <Text> time: {this.props.time} </Text>
    <Text> costPerSeat: {this.props.costPerSeat} </Text>

    <Text> Selected index: {this.props.selectedIndex} </Text>
    <Text> end: {this.props.endGoogle} </Text>*/}

    </View>
</TouchableWithoutFeedback>
</KeyboardAwareScrollView>
    );
  }
}
const styles = {
    containerNoBackground: {
        borderBottomWidth: 10,
        padding: 7,
        //backgroundColor: '#fff',
        //backgroundColor: 'green',
        flexDirection: 'row',
        justifyContent: 'flex-start',
        borderColor: '#e8e8e8',
        position: 'relative',
        shadowColor: '#fff',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.2,
        elevation: 1,
        paddingBottom: 10,
        backgroundColor: 'red',
    },
    carInfo: {
        justifyContent: 'center',
        alignSelf: 'center',
        color: '#c9c9c9',
        fontSize: 20,
        fontWeight: '400',

    },

    IconStyle: {
        height: 25,
        width: 25,
        resizeMode: 'contain',
        paddingLeft: 50,
        flexDirection: 'column',
        backgroundColor: 'transparent',
        paddingTop: 5,
    },
    FakeIconStyle: {
        height: 25,
        width: 25,
        resizeMode: 'contain',
        paddingLeft: 50,
        flexDirection: 'column',
        backgroundColor: 'transparent',
        paddingTop: 5,
    },
    inputStyle: {
        height: 40,
        width: 10,
        backgroundColor: 'white',
        borderWidth: 1,
        borderRadius: 5,
        borderColor: 'white',
        paddingBottom: 0,
        paddingLeft: 20,

    },
    CarInputStyle: {
        height: 30,
        width: 10,
        backgroundColor: 'white',
        borderWidth: 1,
        borderRadius: 5,
        borderColor: 'white',
        flex: 1,
    },
    dateStyle: {

        paddingTop: 7,
        borderWidth: 1,
        borderRadius: 5,
        borderColor: 'white',



    },
    roundTrip: {
        backgroundColor: 'white',
        fontSize: 18,
        flex: 1,
        color: '#c9c9c9',
        //fontWeight: '400',
        padding: 10,
        paddingLeft: 0,
        paddingBottom: 5,
        borderWidth: 1,
        borderRadius: 5,
        borderColor: 'white',

        flexDirection: 'row',
        //alignSelf: 'flex-start',

         justifyContent: 'center',
         //alignContent: 'flex-start',
         //backgroundColor: 'red'

    },
    TimeIconStyle: {
         height: 25,
        width: 25,
        resizeMode: 'contain',
        paddingLeft: 50,
        flexDirection: 'column',
        backgroundColor: 'transparent',
        marginTop: 10,

    },
    rountripView: {

        borderWidth: 1,
        borderRadius: 5,
        borderColor: 'white',
        flexDirection: 'row',
        flex: 1,
        alignSelf: 'center',
        justifyContent: 'flex-end',
    },
    tabsContainerStyle: {
        width: widthScreen / 2,
        justifyContent: 'center',
        alignSelf: 'center',
    },
}

MyTrip.navigationOptions = {
  title: 'MyTrip',
};

const mapStateToProps = (state) => {
    const {
         startGoogle,
         stopOverGoogle,
         endGoogle,
         date,
         costPerSeat,
         roundTrip,
         returnDate,
         carSeats,


        } = state.postRide;

        const {
            carSelected,
        } = state.cars;

        const rides = _.map(state.rides, (val, uid) => {
        return { ...val, uid };
    });
    return {

        startGoogle,
        stopOverGoogle,
        endGoogle,
        date,
        costPerSeat,
        roundTrip,
        returnDate,
        carSeats,
        carSelected,
        rides



    };
};



 export default connect(mapStateToProps, { DriverAddForm, ridesFetch })(MyTrip);