import React from 'react';
import { View, Text, TextInput, StyleSheet, Button, TouchableOpacity, ScrollView, FlatList, Image } from 'react-native';
import { connect } from 'react-redux'
// import { CheckBox } from 'react-native-elements'
import CheckBox from 'react-native-check-box'
import { Card } from 'react-native-shadow-cards'
import { Ionicons, MaterialCommunityIcons, MaterialIcons, AntDesign, FontAwesome } from '@expo/vector-icons'
import i18n from 'i18n-js';
import CurrencyFormat from 'react-currency-format';
import Axios from 'axios'


class Items extends React.Component {

    render() {
        const { item } = this.props
        // console.log('ini props nya item : ' + JSON.stringify(item))
        console.log(this.props)
        const { description, name, image, price, qty } = item
        return (
            <View style={{ flex: 1, margin: 10 }}>
                <View style={{ flexDirection: 'row' }}>
                    <View style={{ borderRadius: 20 }}>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Menu Detail', { Foto: image, nama: name, desc: description })}>
                            <Image style={{ height: 100, width: 100, resizeMode: 'contain' }}
                                source={{
                                    uri: image
                                }}
                            />
                        </TouchableOpacity>
                    </View>
                    <View>
                        <View style={{ margin: 5, }}>
                            <Text style={{ fontWeight: 'bold', fontSize: 20 }}> Nama Menu : {name}</Text>
                        </View>
                        <Text style={{ margin: 5 }}>
                            Description : {description}
                        </Text>
                        <View style={{ margin: 5 }}>
                            <CurrencyFormat value={price} displayType={'text'}
                                thousandSeparator={true}
                                prefix={'Rp '}
                                renderText={value => <Text>{value}</Text>} />
                        </View>
                        <View style={{ flexDirection: 'row', margin: 5 }}>
                            <Text>Quantity :   </Text>
                            <TouchableOpacity onPress={() => this.props.minusQty()}>
                                <AntDesign name='minuscircleo'
                                    size={20}
                                    color={'blue'}
                                />
                            </TouchableOpacity>
                            <Text>   {qty}   </Text>
                            <TouchableOpacity onPress={() => this.props.plusQty()}>
                                <AntDesign name='pluscircleo'
                                    size={20}
                                    color={'blue'}
                                />
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

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

    minusQty(item, index) {

        const listMenu = [...this.state.listMenu]
        let hasil = [];
        if (listMenu[index].qty !== 0) {
            listMenu[index].qty -= 1
            this.setState({
                listMenu
            })

            // hasil.push(listMenu[index].qty);
            // console.log("INI HASILNYA : " + JSON.stringify(hasil))
        }

    }

    plusQty(item, index) {

        this.setState({
            shopingCart: item
        })
        const listMenu = [...this.state.listMenu]
        listMenu[index].qty += 1

        this.setState({
            listMenu,
        })
    }

    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}>
                <View style={{ flexDirection: 'row', justifyContent: 'center' }}>
                    <TouchableOpacity style={styles.buttonDelivery} >
                        <Text style={{ textAlign: 'center', color: '#354175', fontWeight: 'bold' }}>{i18n.t('delivery')}</Text>
                    </TouchableOpacity>
                    <TouchableOpacity style={styles.buttonPickup} >
                        <Text style={{ textAlign: 'center', color: '#fff', fontWeight: 'bold' }}>{i18n.t('pickup')}</Text>
                    </TouchableOpacity>
                </View>
                <View style={{margin :5}}>
                <Text style={{ textAlign: 'center', fontSize: 12, }}>
                    {i18n.t('orderInfo')}
                </Text>
                <Text style={{ textAlign: "center", fontSize: 12, top: 5 }}>
                    Excelso Senayan City
                </Text>
                </View>
                <View style={styles.header}>
                    <Text style={{ textAlign: 'center', fontSize: 15 }}>YOUR ORDER(S)</Text>
                    <TouchableOpacity onPress={() => this.props.navigation.goBack()}>
                        <Text style={{ textAlign: 'center', fontSize: 15, color:'#ccb46c' }}>+ ADD MORE</Text>
                    </TouchableOpacity>
                </View>
                <View style={styles.order}>

                    {/* <FlatList
                        data={this.props.route.params.DATA}
                        renderItem={({ item, index }) => (
                            <Items navigation={this.props.navigation}
                                item={item}
                                minusQty={() => this.minusQty(item, index)}
                                plusQty={() => this.plusQty(item, index)}
                            />
                        )}
                        keyExtractor={item => item.id}
                    /> */}

                </View>
                <View style={styles.payment}>
                    <Text>PAYMENT METHODS</Text>
                </View>
                <View style={{ alignItems: 'center' }}>
                    <TouchableOpacity onPress={() => {
                                    this.checkedSelection('balance')
                                }}>
                    <Card style={{ margin: 5, padding: 10 }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <View>
                                <Text>EXCELSO BALANCE</Text>
                            </View>
                            <View style={{paddingRight:10}}>
                            <CheckBox
                                onClick={{}}
                                isChecked={this.state.checkedBalance}
                                checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
                                unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
                            />
                            </View>
                        </View>
                    </Card>
                    </TouchableOpacity>
                </View>
                <View style={{ alignItems: 'center' }}>
                <TouchableOpacity onPress={() => {
                                    this.checkedSelection('point')
                                }}>
                    <Card style={{ margin: 5, padding: 10 }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <View>
                                <Text>EXCELSO POINTS</Text>
                            </View>
                            <View style={{paddingRight:10}}>
                            <CheckBox
                                onClick={{}}
                                isChecked={this.state.checkedPoint}
                                checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
                                unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
                            />
                            </View>
                        </View>
                    </Card>
                    </TouchableOpacity>
                </View>
                <View style={{ alignItems: 'center' }}>
                    <TouchableOpacity onPress={() => {
                                    this.checkedSelection('balancepoint')
                                }}>
                    <Card style={{ margin: 5, padding: 10 }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <View>
                                <Text>EXCELSO BALANCE + POINTS</Text>
                            </View>
                            <View style={{paddingRight:10}}>
                            <CheckBox
                                onClick={{}}
                                isChecked={this.state.checkedBalancePoint}
                                checkedImage={<FontAwesome name='check-circle' size={30} color={'#ccb46c'} />}
                                unCheckedImage={<FontAwesome name='circle-o' size={30} color={'#ccb46c'} />}
                            />
                            </View>
                        </View>
                    </Card>
                    </TouchableOpacity>
                </View>
                <View style={{ alignItems: 'center' }}>
                    <Card style={{ margin: 5, padding: 10 }}>
                        <View style={{ flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center' }}>
                            <View>
                                <Text>EXCELSO BALANCE + POINTS</Text>
                            </View>
                            
                        </View>
                    </Card>
                </View>

                <View style={styles.voucher}>
                    <TouchableOpacity>
                        <Text style={{color:'#ccb46c'}}>+ ADD VOUCHER</Text>
                    </TouchableOpacity>
                </View>

                <View style={styles.paymentDetails}>
                    <Text>PAYMENT DETAILS</Text>
                </View>
                <View style={{ margin: 10 }}>
                    <Text style={{paddingLeft:20,paddingTop:15, color:'gray'}}>Detail Pembayaran</Text>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View>
                            <Text style={{paddingLeft:20,paddingTop:15, color:'gray'}}>Harga</Text>
                        </View>
                        <View>
                            <Text style={{paddingRight:150, paddingTop:15, color:'gray'}}>undefined</Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View>
                            <Text style={{paddingLeft:20,paddingTop:10, color:'gray' }}>Ongkos Kirim</Text>
                        </View>
                        <View>
                            <Text style={{paddingRight:150, paddingTop:10, color:'gray'}}>undefined</Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View>
                            <Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Diskon</Text>
                        </View>
                        <View>
                            <Text style={{paddingRight:150, paddingTop:10, color:'gray'}}>undefined</Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View style={{ marginTop: 15, paddingLeft:20,paddingTop:10 }}>
                            <Text style={{ fontSize: 35, color:'#ccb46c' }}>Total</Text>
                        </View>
                        <View style={{ marginTop: 15, paddingRight:60, paddingTop:10 }}>
                            <Text style={{ fontSize: 35, color:'#ccb46c' }}>undefined</Text>
                        </View>
                    </View>
                    <View style={{ flexDirection: 'row', marginTop: 10, justifyContent: 'space-between' }}>
                        <View>
                            <Text style={{paddingLeft:20,paddingTop:10, color:'gray'}}>Tujuan</Text>
                        </View>
                        <View>
                            <Text style={{color:'#ccb46c',paddingRight:150, paddingTop:10}}>undefined</Text>
                        </View>
                    </View>
                    <View style={{ margin: 20, }}>
                        <Button title='Checkout' color='#ccb46c' />
                    </View>
                </View>
            </ScrollView>
        )
    }
}


const styles = StyleSheet.create({

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

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

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

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

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

    paymentDetails: {
        flex: 1,
        margin: 10,
        padding: 20,
        borderTopWidth: 1,
        borderBottomWidth: 1,
        // backgroundColor: 'lightblue'
    },
    buttonDelivery: {
        marginTop: 10,
        paddingTop: 15,
        paddingBottom: 15,
        marginRight: 0,
        marginLeft: 0,
        backgroundColor: '#cce8f0',
        borderRadius: 10,
        borderWidth: 0,
        borderColor: '#fff',
        width: '50%',
        // top: -20,
    },
    buttonPickup: {
        marginTop: 10,
        paddingTop: 15,
        paddingBottom: 15,
        marginRight: 0,
        marginLeft: -50,
        backgroundColor: '#354175',
        borderRadius: 10,
        borderWidth: 0,
        borderColor: '#fff',
        width: '40%',
        // top: -20,
    },


})

const mapStateToProps = (state) => {
    return {

        session_id: state.session_id,
        cart_shop: state.cart_shop
    }
}

export default connect(mapStateToProps)(ShoppingCart)