import { Chantier, Ressources } from '@/class/class';
import { ThemedView, } from '@/components/theme/themed-view';
import React, { useState } from 'react';
import { Image, StyleProp, StyleSheet, View, ViewStyle } from 'react-native';
import { ThemedText } from './theme/themed-text';
import { ThemedButton } from './theme/themed-button';

type RessourcesQte = [Ressources, number];

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

export default function MachineSummary({machine,qte,style,sendMachine, ...otherProps }: Props) {


    const [count,setCount] = useState(qte);
    
    function onPressAdd(machine: Ressources): void {
        if(count<machine.quantity){
            setCount(count+1);
            sendMachine([machine, count+1]);
        }
    }

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

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

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