import React, { useState } from 'react';
import { StyleSheet, TouchableOpacity, View, Text } from 'react-native';

//components
import ListedStorageItem from './ListedStorageItem';
//themes
import { COLORS } from '../../themes/Colors';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
//redux
import { useSelector, useDispatch } from 'react-redux';
export default StorageList = (props) => {
    const products = useSelector(state => state.products)
    const findProductTag = (item) => {
        let product = products.find((product) => product.id === item.id)
        let tag
        product ? tag = product.tag : 0
        return tag
    }
    const storageFiltered = useSelector(state => state.storage.filter((item) =>findProductTag(item) === props.tag))
    const tag = useSelector(state => state.tags.find((tag) => tag.tagName === props.tag))

    const [visible, setVisible] = useState(false);

    if (storageFiltered.length !== 0) {
        return(
            <View style={styles.container}>
                <TouchableOpacity style={[styles.categoryButton]}
                    onPress={() => setVisible(!visible)}>
                    {visible ?
                        <MaterialCommunityIcons name="menu-down" color={COLORS.textW3} size={28} />
                        : <MaterialCommunityIcons name="menu-right" color={COLORS.textW3} size={28} />
                    }
                    <Text style={[styles.textItem, { color: tag.color + 'aa' }]}>{props.tag}</Text>
                </TouchableOpacity>
                <View style={[styles.list]}>
                    {visible ? storageFiltered.map((storageItem, index) => {
                        const product = products.find((product) => product.id === storageItem.id)
                        return <ListedStorageItem key={index} product = {product} storageItem = {storageItem} tag = {tag}/>
                    }) : <View />}
                </View>
            </View>
        )
    }
    else {
        return <View />
    }
}
const height = 30;
const styles = StyleSheet.create({
    container: {
        marginBottom: 5,
    },
    list: {
        alignItems: 'flex-end',
    },
    categoryButton: {
        flex: 1,
        paddingLeft: 0,
        paddingRight: 8,
        flexDirection: 'row',
        alignItems: 'flex-start',
        justifyContent: 'space-between',
    },
    listedItem: {
        borderTopLeftRadius: 15,
        borderBottomLeftRadius: 15,
        width: '90%',
        paddingLeft: 8,
        flexDirection: 'row',
        alignItems: 'center',
        justifyContent: 'space-between',
        marginTop: 2,
        marginBottom: 2,
    },
    textItem: {
        flex: 1,
        left: 8,
        fontFamily: 'Roboto',
        fontSize: height * 0.65,
        color: COLORS.textW0 + 'bb',
    },
    textAmount: {
        width: '10%',
        backgroundColor: '#ffffff' + '10',
        paddingLeft: 3,
        borderRadius: 6,

        marginRight: 3,
        fontFamily: 'Roboto',
        fontSize: height * 0.6,
        color: COLORS.textW1,
    },
    amountButtons: {
        flexDirection: 'row',
        marginTop: 3,
        marginBottom: 3,
        borderTopLeftRadius: 10,
        borderBottomLeftRadius: 10,
        height: 25,
        width: 70,
        alignItems: 'center',
        alignSelf: 'flex-start',
        justifyContent: 'space-evenly',

        backgroundColor: '#ffffff' + '10',
    },
    amountIncrement: {
    },
    amountDecrement: {
    },
    deleteItem: {
        height: 27,
        width: 27,
        backgroundColor: '#ffffff' + '10',
        borderRadius: 12.5,
        marginLeft: 5,
        justifyContent: 'center',
        alignItems: 'center',
    }
})