import React, { useState } from 'react';
import {
    StyleSheet,
    Text,
    View,
    Image,
    TouchableOpacity,
    Alert,
    ActivityIndicator,
} from 'react-native';
import { Picker } from '@react-native-picker/picker';
import Data from './dataHandler'; // Import the data handling class
let eldersData = new Data(); // Create an instance of the data handling class
export default function AddElderScreen() {
    const [selectedElder, setSelectedElder] = useState('1'); // Default to '1'
    const [loading, setLoading] = useState(false); // State for loading

    const [addedElders, setAddedElders] = useState([]); // State for added elders

    const handleAdd1 = () => {
        // Construct the API URL
        const apiUrl = 'http://192.168.10.7:5000/add_elder'; // Replace with your server URL

        // Set loading to true
        setLoading(true);

        // Make the API request to add an elder
        fetch(apiUrl, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({ id: selectedElder }),
        })
            .then((response) => response.json())
            .then((data) => {
                // Show success message
                Alert.alert('Success', data.message);
            })
            .catch((error) => {
                // Show error message
                Alert.alert('Error', 'Failed to add elder. Please try again.');
            })
            .finally(() => {
                // Set loading to false
                setLoading(false);
            });
    };

    const handleAdd = async () => {
        setLoading(true);
        setAddedElders([...addedElders, selectedElder]);
        await eldersData.addData(selectedElder);
        console.log(addedElders);
        Alert.alert('Success', 'Elder added successfully');
        setLoading(false);
    };

    return (
        <View style={styles.container}>
            <View style={styles.header}>
                <Image
                    source={require('./assets/logo.png')} // Replace with your logo path
                    style={styles.logo}
                />
                <Text style={styles.appName}>ElderCare+</Text>
                <Text style={styles.slogan}>Add New Elder Person</Text>
            </View>
            <View style={styles.content}>
                <Text style={styles.description}>
                    Select an elder from the list below to admit into
                    ElderCare+.
                </Text>
                <View style={styles.pickerContainer}>
                    <Picker
                        selectedValue={selectedElder}
                        style={styles.picker}
                        onValueChange={(itemValue) =>
                            setSelectedElder(itemValue)
                        }>
                        <Picker.Item label="Elder 1" value="1" />
                        <Picker.Item label="Elder 2" value="2" />
                        <Picker.Item label="Elder 3" value="3" />
                        <Picker.Item label="Elder 4" value="4" />
                        <Picker.Item label="Elder 5" value="5" />
                        <Picker.Item label="Elder 6" value="6" />
                        <Picker.Item label="Elder 7" value="7" />
                        <Picker.Item label="Elder 8" value="8" />
                        <Picker.Item label="Elder 9" value="9" />
                        <Picker.Item label="Elder 10" value="10" />
                        <Picker.Item label="Elder 11" value="11" />
                        <Picker.Item label="Elder 12" value="12" />
                        <Picker.Item label="Elder 13" value="13" />
                        <Picker.Item label="Elder 14" value="14" />
                        <Picker.Item label="Elder 15" value="15" />
                        <Picker.Item label="Elder 16" value="16" />
                        <Picker.Item label="Elder 17" value="17" />
                        <Picker.Item label="Elder 18" value="18" />
                    </Picker>
                </View>
                {loading ? (
                    <ActivityIndicator
                        size="large"
                        color="#FF1B08"
                        style={styles.loader}
                    />
                ) : (
                    <TouchableOpacity
                        style={styles.button}
                        onPress={handleAdd}
                        disabled={loading}>
                        <Text style={styles.buttonText}>Add Elder</Text>
                    </TouchableOpacity>
                )}
                <Text style={styles.footerHeading}>Need Assistance?</Text>
                <Text style={styles.footerText}>
                    If you need help with adding an elder, click the dropdown to
                    open a list of available elder persons then select one
                    elder.
                </Text>
            </View>
        </View>
    );
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#F2F4F9', // Light gray background for the entire screen
    },
    header: {
        flex: 0.3, // Occupies 30% of the screen height
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#2D328C', // Blue background for the header
        padding: 20,
        borderBottomRightRadius: 30, // Rounded corners for a better look
        borderBottomLeftRadius: 30,
    },
    logo: {
        width: 100,
        height: 100,
        resizeMode: 'contain',
    },
    appName: {
        fontSize: 24,
        color: '#fff',
        fontWeight: 'bold',
        marginTop: 10,
    },
    slogan: {
        fontSize: 16,
        color: '#fff',
        marginTop: 5,
    },
    content: {
        flex: 0.7, // Occupies the remaining space
        justifyContent: 'center',
        alignItems: 'center',
        padding: 20,
    },
    description: {
        fontSize: 18,
        color: '#000',
        textAlign: 'center',
        marginBottom: 20,
    },
    pickerContainer: {
        width: '100%',
        borderColor: '#2D328C',
        borderWidth: 1,
        borderRadius: 5,
        backgroundColor: '#fff',
        marginBottom: 20,
    },
    picker: {
        height: 50,
        width: '100%',
    },
    button: {
        width: '100%',
        height: 50,
        backgroundColor: '#FF1B08', // Red background for the button
        justifyContent: 'center',
        alignItems: 'center',
        borderRadius: 5,
    },
    buttonText: {
        color: '#fff',
        fontSize: 18,
        fontWeight: 'bold',
    },
    footerHeading: {
        fontSize: 20,
        color: '#2D328C',
        fontWeight: 'bold',
        marginTop: 30,
        textAlign: 'center',
    },
    footerText: {
        fontSize: 16,
        color: '#555',
        textAlign: 'center',
        marginTop: 10,
    },
    loader: {
        marginTop: 20,
    },
});