import { Chantier, Ressources } from '@/class/class';
import { ThemedView, } from '@/components/theme/themed-view';
import React, { useEffect, useState } from 'react';
import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { ThemedText } from '@/components/theme/themed-text';
import { ThemedButton } from '@/components/theme/themed-button';
import { getNbUseRessources } from '@/class/utils';
import { useReservations } from '@/app/ContextReservation';
import { getReservations } from '@/services/ressourcesService';

type RessourcesQte = [Ressources, number];

type Props = {
    ressource:Ressources;
    qte:number;
    sendRessource: (ressource: RessourcesQte) => void;
    style?: StyleProp<ViewStyle>;
};

export default function RessourceSummary({ressource: ressource,qte,style,sendRessource: sendRessource, ...otherProps }: Props) {

    const { reservations, setReservations } = useReservations();
    const [count,setCount] = useState(qte);
    
    function onPressAdd(ressource: Ressources): void {
        if(count<ressource.quantity-getNbUseRessources(ressource,reservations)){
            setCount(count+1);
            sendRessource([ressource, count+1]);
        }
    }

    function onPressSub(ressource: Ressources): void {
        if(count>0){
            setCount(count-1);
            sendRessource([ressource, count-1]);
        }
    }

    useEffect(() => {
        async function loadReservations() {
            const list = await getReservations();
            setReservations(list);
        }

        loadReservations();
    }, []);
    

    return(
        <View style={style}>
            <ThemedView lvl={2} border={3} style={{padding:10,width:"100%",borderRadius:10,flexDirection: 'row',justifyContent: 'space-between',}}>
                <View>
                    <ThemedText>Nom : {ressource.name}</ThemedText>
                    <ThemedText>Restant : {ressource.quantity-getNbUseRessources(ressource,reservations)}/{ressource.quantity}</ThemedText>
                </View>
                <View style={{alignItems:"center"}}>
                    <ThemedButton style={styles.button} lvl={3} onPress={() => onPressAdd(ressource)}>
                        <ThemedText>+</ThemedText>
                    </ThemedButton>
                    <ThemedText>{count}/{ressource.quantity-getNbUseRessources(ressource,reservations)}</ThemedText>
                    <ThemedButton style={styles.button} lvl={3} onPress={() => onPressSub(ressource)}>
                        <ThemedText>-</ThemedText>
                    </ThemedButton>
                </View>
            </ThemedView>
        </View>
    )
    }

const styles = StyleSheet.create({
    button:{
        padding:5,
        marginHorizontal:10,
        alignItems:"center",
        borderRadius: 20,
        width: 40,
        height: 40,
    },
});