import React, { useState } from ‘react’;
import { View, Text, TextInput, Button, ScrollView, StyleSheet, Alert } from ‘react-native’;
import axios from ‘axios’;
import AsyncStorage from ‘@react-native-async-storage/async-storage’;

const itemsList = [
‘Vada Bhaji’, ‘Vada Premix’, ‘Sambar’, ‘Samosa’, ‘Buns’,
‘Misal’, ‘Upma’, ‘Sheera’, ‘Red Sukki chutney’, ‘Green chutney’,
‘Dosa Batter’, ‘Idli batter’, ‘Idli’, ‘Tambada Rassa’, ‘Pandhara Rassa’,
‘Kala Rassa’, ‘Indian Gravy’, ‘White coconut chutney for dosa’, ‘Gobi Manchurian Dry (Ready to Cook)’, ‘Puri Atta’,
‘Bhaji (of Puri Bhaji)’, ‘Bhaji (Of Bombay Pav Bhaji)’, ‘Veg Thali’, ‘Chopped Onion’, ‘Chopped Dhaniya’,
‘Peeled Garlic’, ‘Grated Green Chilly (G4)’, ‘Grated fried Chilly’, ‘Tomato sauce’, ‘Tomato Gravy (Indian)’,
‘Chapati Wheat’, ‘Bhakri Jowar’, ‘Bhakri Bajari’, ‘Patal Thali Bhaji’, ‘Sukki Thali Bhaji’,
‘Kachori’, ‘Puri (of Pani puri)’, ‘Imli sauce’, ‘Kacchi Dabeli Masala’
];

const ChefScreen = ({ navigation }) => {

const [orderItems, setOrderItems] = useState(itemsList.map(item => ({ name: item, quantity: 0 })));
const [statusItems, setStatusItems] = useState({});

const handleQuantityChange = (index, quantity) => {
    const newOrderItems = [...orderItems];
    newOrderItems[index].quantity = quantity;
    setOrderItems(newOrderItems);
};

const handleStatusChange = async (orderId, itemId, status) => {
    const token = await AsyncStorage.getItem('token');
    try {
        await axios.put('http://localhost:5000/api/orders/item-status', { orderId, itemId, status }, {
            headers: {
                'x-auth-token': token
            }
        });
        setStatusItems((prevStatusItems) => ({
            ...prevStatusItems,
            [itemId]: status
        }));
    } catch (err) {
        console.error(err);
        Alert.alert('Error', 'Failed to update item status');
    }
};

const handleSubmit = async () => {
    const token = await AsyncStorage.getItem('token');
    try {
        await axios.post('http://localhost:5000/api/orders/create', { items: orderItems }, {
            headers: {
                'x-auth-token': token
            }
        });
        navigation.navigate('OrderStatus');
    } catch (err) {
        console.error(err);
        Alert.alert('Error', 'Order creation failed');
    }
};

return (
    <ScrollView contentContainerStyle={styles.scrollContainer}>
        {orderItems.map((item, index) => (
            <View key={index} style={styles.itemContainer}>
                <Text style={styles.itemName}>{item.name}</Text>
                <TextInput
                    style={styles.input}
                    keyboardType="numeric"
                    onChangeText={(value) => handleQuantityChange(index, Number(value))}
                    value={String(item.quantity)}
                />
                {statusItems[item.name] === 'Checked and Received' ? (
                    <Text style={styles.statusText}>Status: Checked and Received</Text>
                ) : (
                    <Button
                        title="Check and Receive"
                        onPress={() => handleStatusChange(item.name, item.name, 'Checked and Received')}
                    />
                )}
            </View>
        ))}
        <View style={styles.buttonContainer}>
            <Button title="Proceed" onPress={handleSubmit} />
        </View>
    </ScrollView>
);

};

const styles = StyleSheet.create({
scrollContainer: {
flexGrow: 1,
padding: 20,
backgroundColor: ‘#ffffff’,
justifyContent: ‘space-between’,
},
itemContainer: {
flexDirection: ‘row’,
justifyContent: ‘space-between’,
alignItems: ‘center’,
paddingVertical: 10,
borderBottomWidth: 1,
borderBottomColor: ‘#ccc’,
},
itemName: {
flex: 1,
fontSize: 16,
},
input: {
width: ‘20%’,
height: 40,
borderColor: ‘gray’,
borderWidth: 1,
paddingHorizontal: 10,
},
statusText: {
fontStyle: ‘italic’,
color: ‘green’,
},
buttonContainer: {
alignSelf: ‘center’,
marginVertical: 20,
marginBottom: 40, // Adjust marginBottom to give space for the button
},
});

export default ChefScreen;

i wanted to see all the items and also the proceed button which is at the bottom of the screen