import React from 'react';
import { View, Text, TextInput, StyleSheet, Button, TouchableOpacity, ScrollView, Image,SafeAreaView } from 'react-native';
import { connect } from 'react-redux'
import { CheckBox } from 'react-native-elements'
import i18n from 'i18n-js';
// import MenuSelection from './MenuSelection'
import Axios from 'axios'
import { FlatList } from 'react-native-gesture-handler';


function Item({ name, image, qty }) {
    return (
        <View>
            <Text>{name}</Text>
            <Image source={{ uri: image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
            <Text>{qty}</Text>
        </View>
    )
}

class ShoppingCart extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            kasproBalance: '',
            kasproPoint: '',
            checkedBalance: false,
            checkedPoint: false,
            checkedBalancePoint: false
        }
    }

    checkedSelection(val) {
        // console.log(val)
        if (val == 'balance') {
            this.setState({
                checkedBalance: true,
                checkedPoint: false,
                checkedBalancePoint: false
            })
        } else if (val == 'point') {
            this.setState({
                checkedBalance: false,
                checkedPoint: true,
                checkedBalancePoint: false
            })
        } else {
            this.setState({
                checkedBalance: false,
                checkedPoint: false,
                checkedBalancePoint: true
            })
        }
    }

    componentDidMount() {
        this.getBalance()
    }

    getBalance() {
        let params = {
            session_id: this.props.session_id
        }

        Axios.post('https://excelsocrm.ravintoladev.com/crm/v2/member/get_profile', params).then(res => {
            // console.log(res.data)
            const { kaspro_balance, kaspro_point } = res.data
            // console.log(kaspro_balance,kaspro_point)
            this.setState({
                kasproBalance: kaspro_balance,
                kasproPoint: kaspro_point
            })

            // console.log(this.state.kasproBalance, this.state.kasproPoint)
        }).catch(error => {
            console.log('ini error ' + error)
        })
    }



    render() {

        return (
            <ScrollView style={styles.container}>

                <Text style={{ textAlign: 'center', fontSize: 12, }}>
                    {i18n.t('orderInfo')}
                </Text>
                <Text style={{ textAlign: "center", fontSize: 12, top: 5 }}>
                    Excelso Senayan City
                </Text>

                <View style={styles.header}>
                    <Text style={{ textAlign: 'center', fontSize: 15 }}>YOUR ORDER(S)</Text>
                    <TouchableOpacity>
                        <Text style={{ textAlign: 'center', fontSize: 15 }}>+ ADD MORE</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.order}>
                <SafeAreaView style={styles.container}>
                <FlatList
                        data={this.props.cart_shop}
                        renderItem={({ item }) => (
                            <Item
                             
                                name={item.name}
                                image={item.image}
                                qty = {item.qty}
                            />
                        )} 
                        
                        keyExtractor={item => item.id}/>
                </SafeAreaView>
                </View>
                
                <View style={styles.payment}>
                    <Text>PAYMENT METHODS</Text>
                </View>
                <CheckBox
                    title={'EXCELSO BALANCE\nYour Balance : ' + this.state.kasproBalance + '                                    '}
                    checkedIcon='check-circle-o'
                    uncheckedIcon='circle-o'
                    iconRight
                    onPress={() => this.checkedSelection('balance')}
                    checked={this.state.checkedBalance}
                />
                <CheckBox
                    title={'EXCELSO POINTS\nYour Points : ' + this.state.kasproPoint + '                                       '}
                    checkedIcon='check-circle-o'
                    uncheckedIcon='circle-o'
                    iconRight
                    onPress={() => this.checkedSelection('point')}
                    checked={this.state.checkedPoint}
                />
                <CheckBox
                    title={'EXCELSO BALANCE + EXCELSO POINTS\nYour Balance : ' + this.state.kasproBalance + '\nYour Points : ' + this.state.kasproPoint + '                                       '}
                    checkedIcon='check-circle-o'
                    uncheckedIcon='circle-o'
                    iconRight
                    onPress={() => this.checkedSelection('balancepoint')}
                    checked={this.state.checkedBalancePoint}
                />

                <View style={styles.voucher}>
                    <TouchableOpacity>
                        <Text>+ ADD VOUCHER</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.paymentDetails}>
                    <Text>PAYMENT DETAILS</Text>
                </View>
                <View style={{ margin: 10 }}>
                    <Text>Detail Pembayaran</Text>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View>
                            <Text>Harga</Text>
                        </View>
                        <View style={{ marginRight: 50 }}>
                            <Text>undefined</Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View>
                            <Text>Ongkos Kirim</Text>
                        </View>
                        <View style={{ marginRight: 50 }}>
                            <Text>undefined</Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View>
                            <Text>Diskon</Text>
                        </View>
                        <View style={{ marginRight: 50 }}>
                            <Text>undefined</Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View style={{ marginTop: 15 }}>
                            <Text style={{ fontSize: 35 }}>Total</Text>
                        </View>
                        <View style={{ marginRight: 50, marginTop: 15 }}>
                            <Text style={{ fontSize: 35 }}>undefined</Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View>
                            <Text>Tujuan</Text>
                        </View>
                        <View style={{ marginRight: 50 }}>
                            <Text>undefined</Text>
                        </View>
                    </View>
                </View>
            </ScrollView>
        )
    }
}


const styles = StyleSheet.create({

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

    header: {
        flex: 0.2,
        margin: 10,
        // backgroundColor : '',
        borderBottomWidth: 1,
        borderTopWidth: 1,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between'
    },

    order: {
        flex: 1,
        margin: 10,
        backgroundColor: 'gray'
    },

    payment: {
        flex: 1,
        margin: 10,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        // backgroundColor: 'lightblue'
    },

    voucher: {
        flex: 1,
        margin: 10,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        // backgroundColor: 'lightblue'
    },

    paymentDetails: {
        flex: 1,
        margin: 10,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        // backgroundColor: 'lightblue'
    },


})

const mapStateToProps = (state) => {
    return {

        session_id: state.session_id,
        cart_shop: state.cart_shop

    }
}

export default connect(mapStateToProps)(ShoppingCart)