import React from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput } from 'react-native';
import { connect } from 'react-redux';
import ActionType from '../redux/globalActionType';
import NumberFormat from 'react-number-format';


class ItemShoping extends React.Component {
    handleChangeQuantity = (item, quantity) => {

        console.log('CHange Quantity Shopping CHart : ' + JSON.stringify(item))
        console.log('new quantity : ' + quantity)
        if (quantity == '') {
            item.quantity = 1
        }
        this.props.onChange()
        const order_item = {
            id: item.id,
            code: item.code,
            name: item.name,
            description: item.description,
            note: item.note,
            image: item.image,
            price: parseInt(item.price),
        }
        this.props.changeQuantity({ item: order_item, quantity: quantity })
    }
    render() {
        const { item } = this.props
        // console.log(this.props)
        return (

            <View style={{ flex: 1 }} key={item.id}>
                {/* <Text style={{ fontSize: 20, color: '#c9af6d' }}>{item.name}</Text> */}
                <View style={{ flex: 1, flexDirection: 'row', height: 100, marginVertical:10}}>
                    <View style={{ flex: 1, height: 100 }}>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('Menu Detail', { nameMenu: item.name, desc: item.description, image: item.image })}>
                            <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 10, }}></Image>
                        </TouchableOpacity>
                    </View>
                    <View style={{ flex: 2, height: 150 }}>
                        <View style={{ marginLeft: 5, marginRight: 5 }}>
                            <Text style={{ fontSize: 14, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color:'#838383' }}>{item.name}</Text>
                            <NumberFormat decimalScale={0} value={item.price} renderText={value => <Text style={{ fontSize: 12, margin: 5, marginRight: 10, fontFamily: 'Gotham-Black', color:'#838383' }}>Rp. {value}</Text>} displayType={'text'} thousandSeparator={true} prefix={''} />
                        </View>
                        <View style={{ marginLeft: 5, marginRight: 5, flexDirection: 'row' }}>
                            <TouchableOpacity onPress={() => this.handleAddDescription()}>
                                <View style={styles.shadowEdit}>
                                    <Image source={(require('../assets/icon/icon-pencil.png'))} style={{ height: 25, width: 25, marginLeft: 5, marginRight: 5 }}></Image>
                                </View>
                            </TouchableOpacity>
                            <View style={styles.shadowAdd}>
                                <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleMin()}>
                                    <Text style={{ fontSize: 25, alignSelf: 'center', fontFamily: 'Gotham-Light', color: '#CFB368' }}> - </Text>
                                </TouchableOpacity>
                                <TextInput
                                    style={{ padding: 2, textAlign: 'center', fontFamily: 'Gotham-Black', color:'#838383', fontSize: 14, marginRight: 5, marginLeft: 5 }}
                                    keyboardType={'numeric'}
                                    onChangeText={(quantity) => this.handleChangeQuantity(item, quantity)}>{item.quantity}</TextInput>
                                <TouchableOpacity style={{ alignSelf: 'center' }} onPress={() => this.props.handleAdd()}>
                                    <Text style={{ fontSize: 25, alignSelf: 'center', fontFamily: 'Gotham-Light', color: '#CFB368' }}> + </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    shadowEdit: {
        height: 30,
        width: 40,
        borderWidth: 1,
        borderRadius: 2,
        borderColor: '#ddd',
        borderBottomWidth: 0,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        elevation: 1,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 5,
    },
    shadowAdd: {
        height: 30,
        width: 90,
        borderWidth: 1,
        borderRadius: 2,
        borderColor: '#ddd',
        borderBottomWidth: 0,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        elevation: 1,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 5,
        flexDirection: 'row'
    },
    shadowMin: {
        height: 20,
        width: 20,
        borderWidth: 1,
        borderRadius: 2,
        borderColor: '#ddd',
        borderBottomWidth: 0,
        shadowColor: '#000',
        shadowOffset: { width: 0, height: 2 },
        shadowOpacity: 0.8,
        shadowRadius: 2,
        elevation: 1,
        marginLeft: 5,
        marginRight: 5,
        marginTop: 10,
    }
})

const mapStateToProps = (state) => {
    // console.log(state)
    return {
        session_id: state.session_id,
        outlet_id: state.outlet_id,
        order_quantity: state.order_quantity,
        order_total: state.order_total,
        quantity: state.quantity,
    }
}

const mapDispatchToProps = (dispacth) => {
    return {
        changeQuantity: (params) => dispacth({
            type: ActionType.CHANGE_QUANTITY,
            data: {
                item: params.item,
                new_quantity: params.quantity
            }
        }),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(ItemShoping)
