import React, { useState } from 'react';
import { View, Text, Button, StyleSheet, TouchableOpacity } from 'react-native';
import CategoryProgressBar from './CategoryProgressBar';
import { useTheme } from '../../app/contexts/ThemeContext';

interface CategoryItem {
    name: string;
    color: string;
    maxValue: number;
    currentValue: number;
}

interface CategoryProgressBarListProps {
    categories: CategoryItem[];
}

const MAX_VISIBLE_BARS = 4;

const CategoryProgressBarList: React.FC<CategoryProgressBarListProps> = ({ categories }) => {
    const [visibleBars, setVisibleBars] = useState(MAX_VISIBLE_BARS);

    const showMore = () => {
        setVisibleBars(prevVisibleBars => prevVisibleBars + MAX_VISIBLE_BARS);
    };

    return (
        <View>
            {categories.slice(0, visibleBars).map((category, index) => (
                <CategoryProgressBar
                    key={index}
                    categoryName={category.name}
                    color={category.color}
                    maxValue={category.maxValue}
                    currentValue={category.currentValue}
                />
            ))}
            {visibleBars < categories.length && (
                <TouchableOpacity style={styles.showMoreButton} onPress={showMore}>
                    <Text style={styles.buttonText}>Show More</Text>
                </TouchableOpacity>
            )}
        </View>
    );
};

const styles = StyleSheet.create({
    showMoreButton: {
        backgroundColor: '#EF6C00',
        padding: 10,
        borderRadius: 5,
        margin: 10,
        alignItems: 'center',
    },
    buttonText: {
        color: 'white',
        fontSize: 16,
        fontWeight: 'bold',
    },
});

export default CategoryProgressBarList;