import React from 'react';
import { View, Text, TextInput, StyleSheet, Button, Alert, TouchableOpacity, Image } from 'react-native';
import { Rating, AirbnbRating } from 'react-native-elements';
import { connect } from 'react-redux';
import Axios from 'axios';
import ActionType from '../redux/globalActionType';
import Spinner from 'react-native-loading-spinner-overlay';

class RatingOrder extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            review: "",
            rating: 5,
        }
    }

    rating(rating){

        this.setState({
             rating: rating,

        })
    }

    review(){

            let paramater = {
                session_id: this.props.session_id,
                transaction_id: this.props.route.params.idTrans,
                rating: this.state.rating,
                review: this.state.review,
                lat: this.props.lat,
                long: this.props.long
            }

            console.log("INI PARAMS"+ JSON.stringify(paramater) );
    
            Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/review/transaction', paramater).then(res => {
                Alert.alert("Terimakasih Atas masukan anda!")
                this.props.navigation.navigate('Home');

            }).catch(error => {
                console.log ("INI error " + error)
                let response = error.response.data;
                Alert.alert(response.msg);
            })
    }

    render() {
        return (
            <View style={styles.container}>
                <Spinner
                    visible={this.state.spinner}
                    textContent={'Loading...'}
                    textStyle={styles.spinnerTextStyle}
                />
                <View style={{ flex: 3 }}>
                    <View style={{ flex: 1, marginRight: 30, marginLeft: 30, top: 50 }}>
                        <AirbnbRating
                            count={5}
                            reviews={["Terrible", "Bad", "Meh", "OK", "Good", "Hmm...", "Very Good", ]}
                            onFinishRating={rating => this.rating(rating)}
                            defaultRating={5}
                            size={30}
                        />
                        <Text style={{ fontFamily: 'Gotham-Black', color: '#CFB368', fontSize: 20, textAlign: 'center', margin: 3,top:10}}>Review</Text>
                        <TextInput style={{ height: 150, borderWidth: 1, padding: 5, margin: 10, borderRadius: 10, borderColor: 'grey', fontFamily: 'Gotham-Black', textAlign: 'center', color: 'grey', fontWeight: 'bold', fontSize: 20,top:20 }}
                            onChangeText={(review) => this.setState({ review })}
                            value={this.state.review}
                            autoCapitalize="none"
                            value={this.state.review}
                        />

                        <TouchableOpacity style={{ height: 100 }} onPress={()=>this.review()}>
                            <View style={{ backgroundColor: '#CFB368', height: 45, top: 20, borderRadius: 10, marginRight: 50, marginLeft: 50 }}>
                                <Text style={{ alignSelf: 'center', top: 10, color: 'white', fontFamily: 'Gotham-Black', fontSize: 20 }}>SUBMIT</Text>
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={{ flex: 1, flexDirection: 'row' }}>
{/* 
                    <View style={styles.v_logo}>
                        <View style={{ flex: 1, alignSelf: 'flex-start' }}>
                            <Image resizeMode="contain" source={require('../assets/images/daun.png')} style={styles.logo}></Image>
                        </View>
                        <View style={{ flex: 1 }}>

                        </View>
                    </View> */}

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

                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({

    container: {
        flex: 1,
        backgroundColor: '#ffff'
    },

    header: {
        flex: 0.5,
        margin: 10,
    },

    form: {
        flex: 3,
        top: 40,
        margin: 10,
        marginTop: 0,
    },

    field_email: {
        flexDirection: 'row'
    },

    button: {
        height: 40,
        margin: 10,

    },
    logo: {
        alignSelf: 'flex-start',
        marginTop: 50,
        width: 290,
        height: 290,
        bottom: 145,

    },
    v_logo: {
        flex: 2,
        flexDirection: 'column-reverse',
        alignContent: 'flex-start',
    }

})



const mapStateToProps = (state) => {
    return {
        
        session_id: state.session_id,
        lat: state.lat,
        long: state.long,
    }
}

export default connect(mapStateToProps)(RatingOrder);


