import { ColorValue, StyleSheet, Text, View } from "react-native";
import { TouchableOpacity } from "react-native-gesture-handler";
import { useTheme } from "../../app/contexts/ThemeContext";
import CustomCard from "../common/CustomCard";

export type CategoryItemProps = {
    category: string,
    color: ColorValue,
    allocated_amount: number,
    total_expenses: number,
    category_guid: string, 
    onPress?: () => void,
}

const CategoryItem = (properties: CategoryItemProps) => {
  
    const { colors } = useTheme();

    const subText = `${properties.total_expenses} / ${properties.allocated_amount} €`;

    return (
        <TouchableOpacity onPress={properties.onPress}>
            <CustomCard style={styles.customCardStyle}> 
                <View style={[styles.colorTipStyle, {backgroundColor: "blue"}]}/>
                <View style={[styles.textViewStyle]}>
                    <Text style={[styles.categoryNameStyle, {color: colors.primaryText}]}>
                        {properties.category}
                    </Text>
                    <Text style={[styles.subTextStyle, {color: colors.secondaryText}]}>
                        {subText}
                    </Text>
                </View>
            </CustomCard>
        </TouchableOpacity>
    );
};

export default CategoryItem;

const styles = StyleSheet.create({
    customCardStyle: {
        flexDirection: "row",
        justifyContent: "space-between",
    },
    colorTipStyle: {
        width: 25,
        borderTopLeftRadius: 10,
        borderBottomLeftRadius: 10,
    },
    textViewStyle: {
        flex: 2,
        flexDirection: "column",
        paddingVertical: 5,
        paddingHorizontal: 10,
        alignSelf: "stretch",
    },
    categoryNameStyle: {
        fontSize: 30,
        fontWeight: "bold",
    },
    subTextStyle: {
        fontSize: 17.5,
    }
});
