{/*
Todo:
Create a stylesheet file
Look into routing and understand it better
Look into how to better implement multiple modals
Look into and utilise SQLite
*/}

import {
    View,
    Text,
    StyleSheet,
    Pressable,
    Modal,
    Image,
    FlatList, } from 'react-native'
import React, { useContext, useEffect, useState } from 'react'
import { SafeAreaView } from 'react-native-safe-area-context'
import { TouchableOpacity } from 'react-native-gesture-handler'
import { router } from 'expo-router'
import AppContext from '../service/AppContext.js'

const styles = StyleSheet.create({

        // These are the styles for all of the components in the home screen
        templateContainer: {
                flexDirection: 'row',
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'center',
                backgroundColor: 'red',
                borderColor: 'black',
                borderWidth: 5,
                width: '90%',
                height: '80%',
                marginTop: 150,
                flexWrap: 'wrap',
                gap: 10,
                paddingTop: 10,
        },
        templateBox: {
                display: 'flex',
                alignItems: 'flex-start',
                justifyContent: 'flex-start',
                backgroundColor: 'green',
                borderColor: 'black',
                borderWidth: 5,
                width: '45%',
                height: '25%',
                margin: 1,
        },
        headerText: {
                fontSize: 30,
                textAlign: 'center',
                fontWeight: 'bold'
        },
        templateText: {
                fontSize: 20,
                textAlign: 'center',
                fontWeight: 'bold'
        },
        modalView: {
            display: 'flex',
            marginTop: "5%",
            justifyContent: "center",
            alignItems: "center",
            backgroundColor: "orange",
            borderRadius: 5,
            width: "80%",
            height: "auto",
        },
        pressableBox: {
            display: 'flex',
            alignItems: 'center',
            justifyContent: 'center',
            width: "133px",
            height: "133px",
        }

})

export default function home() {

    // Initialising the modal states
    // This could possibly be done in a better way and needs to be revisited
    const [modalVisible1, setModalVisible1] = useState(false);
    const [modalVisible2, setModalVisible2] = useState(false);
    const [modalVisible3, setModalVisible3] = useState(false);
    const [modalVisible4, setModalVisible4] = useState(false);
    const context = useContext(AppContext);
    const { template1 } = context ?? {};
    const { template2 } = context ?? {};
    const { isLoading } = context ?? {};

    return (
        //Use SafeAreaView to avoid the notch on the most new iphone
        <SafeAreaView style={{
                display: 'flex',
                alignItems: 'center',
                justifyContent: 'center'
                }}>

                <View style={styles.templateContainer}>

                    {/*
                    These are the pressable boxes for the templates.
                    They are all coupled with their associated modal.
                    */}

                        <Pressable style={styles.templateBox} onPress={() => setModalVisible1(true)}>
                            {/*
                            !isLoading only shows the text component once isLoading is false
                            template1 {data from template1}
                            [0]? {the first element in the array, other elements are not needed, only templateName is needed,
                            ? is used to prevent an error if the array is empty}
                            templateName {the name of the template}
                            Will need to reconsider how to do this when there are multiple templates
                             */}
                           {!isLoading && <Text style={styles.templateText}>{template1[0]?.templateName}</Text>}
                        {template2 ? (
                            <FlatList
                                data={template1}
                                renderItem={({ item }) => (
                                    <View>
                                        <Text>{item.workoutName}</Text>

                                    </View>
                                )}
                                keyExtractor={(item, index) => index}
                            />
                        ) : (
                            <Text>Loading...</Text>
                        )}
                        </Pressable>

                        <Pressable style={styles.templateBox} onPress={() => setModalVisible2(true)}>
                                {!isLoading && <Text style={styles.templateText}>{template2[0]?.templateName}</Text>}
                            {template2 ? (
                                <FlatList
                                    data={template2}
                                    renderItem={({ item }) => (
                                        <View>
                                            <Text>{item.workoutName}</Text>

                                        </View>
                                    )}
                                    keyExtractor={(item, index) => index}
                                />
                            ) : (
                                <Text>Loading...</Text>
                            )}
                        </Pressable>

                        <Pressable style={styles.templateBox} onPress={() => setModalVisible3(true)}>
                                <Text style={styles.templateText}>Template 3</Text>
                        </Pressable>

                        <Pressable style={styles.templateBox} onPress={() => setModalVisible4(true)}>
                                <Text style={styles.templateText}>Template 4</Text>
                        </Pressable>

                </View>

                    {/*
                    These are the modals for the templates.
                    I need to look into a more efficient and clean way to code this part.
                    For now this is the solution.
                    */}

                    {/*
                    onRequestClose only has effect on Andriod devices.
                    This is to handle the hardware back button.
                    This has no effect on iOS.
                    */}
                    <Modal
                        animationType="slide"
                        transparent={true}
                        visible={modalVisible1}
                        onRequestClose={() => {
                        Alert.alert("Modal has been closed.");
                        setModalVisible1(!modalVisible1);
                        }}
                    >
                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                            <View style={styles.modalView}>

                                <View style={
                                    {
                                        flexDirection: 'row',
                                        gap: 75,
                                        display: "flex",
                                        width: "100%",
                                        height: "auto",
                                        marginBottom: "5%",
                                        marginTop: "5%",
                                        }}>

                                    <Pressable onPress={() => setModalVisible1(false)}>
                                        <Image source={
                                            require("../assets/images/x_icon.png")}
                                            style={{height: 25, width: 25}}/>
                                    </Pressable>

                                    <Text style={styles.templateText}>{template1[0]?.templateName}</Text>


                                    <TouchableOpacity
                                    onPress={() => {
                                        setModalVisible1(false);
                                        console.log("This is template1" + template1);
                                        router.push({
                                            pathname: '/workout/[template]',
                                            params: { templateId: 1 }
                                        });
                                    }}>

                                        <Text style={styles.templateText}>Start</Text>

                                    </TouchableOpacity>

                                </View>

                            </View>
                        </View>
                    </Modal>

                    <Modal
                        animationType="slide"
                        transparent={true}
                        visible={modalVisible2}
                        onRequestClose={() => {
                        Alert.alert("Modal has been closed.");
                        setModalVisible2(!modalVisible2);
                        }}
                    >
                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                            <View style={styles.modalView}>

                                <View style={
                                    {
                                        flexDirection: 'row',
                                        gap: 75,
                                        display: "flex",
                                        width: "100%",
                                        height: "auto",
                                        marginBottom: "5%",
                                        marginTop: "5%",
                                        }}>

                                    <Pressable onPress={() => setModalVisible2(false)}>
                                        <Image source={
                                            require("../assets/images/x_icon.png")}
                                            style={{height: 25, width: 25}}/>
                                    </Pressable>

                                    <Text style={styles.templateText}>{template2[0]?.templateName}</Text>

                                    <Text style={styles.templateText}>Start</Text>

                                </View>

                            </View>
                        </View>
                    </Modal>

                    <Modal
                        animationType="slide"
                        transparent={true}
                        visible={modalVisible3}
                        onRequestClose={() => {
                        Alert.alert("Modal has been closed.");
                        setModalVisible3(!modalVisible3);
                        }}
                    >
                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                            <View style={styles.modalView}>

                                <View style={
                                    {
                                        flexDirection: 'row',
                                        gap: 75,
                                        display: "flex",
                                        width: "100%",
                                        height: "auto",
                                        marginBottom: "5%",
                                        marginTop: "5%",
                                        }}>

                                    <Pressable onPress={() => setModalVisible3(false)}>
                                        <Image source={
                                            require("../assets/images/x_icon.png")}
                                            style={{height: 25, width: 25}}/>
                                    </Pressable>

                                    <Text style={styles.templateText}>Template 3</Text>

                                    <Text style={styles.templateText}>Start</Text>

                                </View>

                            </View>
                        </View>
                    </Modal>

                    <Modal
                        animationType="slide"
                        transparent={true}
                        visible={modalVisible4}
                        onRequestClose={() => {
                        Alert.alert("Modal has been closed.");
                        setModalVisible4(!modalVisible4);
                        }}
                    >
                        <View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
                            <View style={styles.modalView}>

                                <View style={
                                    {
                                        flexDirection: 'row',
                                        gap: 75,
                                        display: "flex",
                                        width: "100%",
                                        height: "auto",
                                        marginBottom: "5%",
                                        marginTop: "5%",
                                        }}>

                                    <Pressable onPress={() => setModalVisible4(false)}>
                                        <Image source={
                                            require("../assets/images/x_icon.png")}
                                            style={{height: 25, width: 25}}/>
                                    </Pressable>

                                    <Text style={styles.templateText}>Template 4</Text>

                                    <Text style={styles.templateText}>Start</Text>

                                </View>

                            </View>
                        </View>
                    </Modal>
        </SafeAreaView>
    )
}