import React from 'react';
import { View, Text, StyleSheet, ScrollView, TouchableOpacity, Image, TextInput } from 'react-native';

export default class Item extends React.Component {
    render() {
        const { item } = this.props
        // console.log('ini props nya item : ' + JSON.stringify(item))
        const { description, name, image, price, qty, } = item
        return (
            <View style={{ flex: 1, margin: 10 }}>
                <Text style={{ fontSize: 20, color: '#c9af6d' }}>{item.category.name}</Text>
                <View style={{ flexDirection: 'row' }}>
                    <View >
                        <Image source={{ uri: item.image }} style={{ height: 100, width: 100, borderRadius: 5, top: 5 }}></Image>
                    </View>
                    <View >
                        <Text style={{ fontSize: 20, margin: 5, marginRight: 10, fontWeight: 'bold' }}>{item.name}</Text>
                        <Text style={{ fontSize: 15, margin: 5, marginRight: 10 }}>Rp. {item.price}</Text>
                        <View style={{ flexDirection: 'row', flex: 1 }}>
                            <View style={styles.shadowEdit}></View>
                            <View style={styles.shadowAdd}>
                                <TouchableOpacity>
                                    <Text style={{ fontSize: 20, margin: 2 }}> - </Text>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => this.props.handleRemove()}>
                                    <TextInput
                                        style={{ height: 25, padding: 2,textAlign:'center',margin:2 }}
                                        autoCapitalize="none">
                                            {item.qty}
                                        </TextInput>
                                </TouchableOpacity>
                                <TouchableOpacity onPress={() => this.props.handleAdd()}>
                                    <Text style={{ fontSize: 20, margin: 2 }}> + </Text>
                                </TouchableOpacity>
                            </View>
                        </View>
                    </View>
                </View>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    shadowEdit: {
        height: 30,
        width: 25,
        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,
    },
    shadowAdd: {
        height: 30,
        width: 75,
        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,
        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,
    }
})
