import { FontAwesome } from "@expo/vector-icons";
import { useRouter, useLocalSearchParams } from "expo-router";
import { FlatList, StyleSheet, Text, TouchableOpacity, View } from "react-native";
import { ExpenseItem, LoadingSymbol, TextInputBar, EmptyListCompenent, Plus } from "../../../components";
import useFetch from "../../../hooks/useFetch";
import { useTheme } from "../../contexts/ThemeContext";
import { SafeAreaView } from "react-native-safe-area-context";
import { useNavigation } from "expo-router/src/useNavigation";
import { useEffect } from "react";

export default function Page() {
    const router = useRouter();
    const navigation = useNavigation();
    const {colors} = useTheme();
    const {category_guid} = useLocalSearchParams();

    const {category_amount, category_color, category_name, category_type} = fetchCategoryInformation(category_guid.toString());

    const {data, isLoading, reFetch} = useFetch({sql: "SELECT e.guid AS expense_guid, e.name AS expense_name, c.name AS category_name, e.datetime AS expense_datetime, e.amount AS expense_amount, c.color AS category_color FROM expense e JOIN category c ON e.category_guid = c.guid WHERE c.guid = ? ORDER BY expense_datetime desc;", args: [category_guid]});

    const handleEditCategory = () => {
        router.push({pathname: "/editCategory", params: {category_guid: category_guid, category_color: category_color, category_amount: category_amount, category_name: category_name, category_type: category_type}});
    }
    
    const handleBackButton = () => {
        router.back();
    }

    useEffect(() => {
        console.log("useEffect called")
        const unsubscribe = navigation.addListener("focus", () => {
            reFetch();
        })
        return unsubscribe;
    }, [navigation])

    return (
        <SafeAreaView style={[styles.safeAreaView, {backgroundColor: colors.containerColor}]}>
             <Plus onPress={()=> router.push(`/expense/new?category=${category_guid}`)}/>
            <TouchableOpacity style={styles.backContainer} onPress={handleBackButton}>
                <FontAwesome style={styles.iconBack} name="arrow-left" size={35} color={colors.primaryText}/>
                <Text style={[styles.backText, {color: colors.secondaryText}]}>Back</Text>
            </TouchableOpacity>

            <TouchableOpacity style={[styles.categoryEditTouchableOpacity, {backgroundColor: colors.elementDefaultColor}]}
            onPress={handleEditCategory}>
                <Text style={[styles.editButtonText, {color: colors.primaryText}]}>{category_name}</Text>
                <FontAwesome style={styles.iconEdit} name="edit" size={35} color={colors.primaryText}/>
            </TouchableOpacity>

            <TextInputBar style={styles.searchBar} placeholder="Search..."/>

            {isLoading ? (<LoadingSymbol/>) : (
                <FlatList style={{marginHorizontal: 10}}
                    data={data} 
                    renderItem = {({item}) => <ExpenseItem
                        color={item.category_color} 
                        category={item.category_name} 
                        title={item.expense_name} 
                        date={item.expense_datetime} 
                        value={item.expense_amount}
                        onPress={()=>router.push(`/expense/${item.expense_guid}`)}
                    />}
                    keyExtractor={item => item.expense_guid}
                    ItemSeparatorComponent={() => {
                        return (<View style={styles.itemSeperator}/>);
                    }}
                    ListEmptyComponent={EmptyListCompenent}
                />
            )}
        </SafeAreaView>
    );
}

const fetchCategoryInformation = (guid: string) => {

    const {data} = useFetch({sql: "SELECT * FROM category WHERE guid = ?", args: [guid]});

    let category_name = "";
    let category_color = "";
    let category_amount = 0;
    let category_type = "";

    if (data && data[0]) {
        if ("name" in data[0]) category_name = data[0].name as string;
        if ("color" in data[0]) category_color = data[0].color as string;
        if ("allocated_amount" in data[0]) category_amount = data[0].allocated_amount as number;
        if ("type" in data[0]) category_type = data[0].type as string;
    }
    
    return {category_name, category_color, category_amount, category_type};
}

const styles = StyleSheet.create({
    safeAreaView: {
        flex: 1,
    },
    itemSeperator: {
        margin: 5,
    },
    categoryEditTouchableOpacity: {
        borderRadius: 10,
        flexDirection: "row",
        justifyContent: "space-around",
        margin: 10,
    },
    editButtonText: {
        fontSize: 30,
        padding: 10,
        fontWeight: "bold",
    },
    iconEdit: {
        paddingVertical: 10,
        paddingRight: 10,
    },
    searchBar: {
        marginHorizontal: 10,
        marginBottom:20,
    },
    iconBack: {
        paddingLeft: 10,
        paddingRight: 5,
    },
    backText: {
        fontSize: 20,
        padding: 5,
    },
    backContainer: {
        flexDirection: "row",
        justifyContent: "flex-start",
    }
});