import AsyncStorage from '@react-native-async-storage/async-storage';
import { router, useNavigation } from 'expo-router';
import React, { useEffect, useMemo, useState } from 'react';
import { StyleSheet, View } from 'react-native';
import { FlatList } from 'react-native-gesture-handler';
import { SafeAreaView } from 'react-native-safe-area-context';
import { BudgetHeader, CategoryItem, EmptyListCompenent, LoadingSymbol, Plus, TextInputBar } from '../../../components';
import useFetch from '../../../hooks/useFetch';
import { useTheme } from '../../contexts/ThemeContext';
import { useFocusEffect } from 'expo-router/src/useFocusEffect';

export default function Page() {
    const {colors} = useTheme()
    const containerColor = colors.containerColor;
    const navigation = useNavigation();
    const [selectedPage, setSelectedPage] = useState<"expense"|"saving">("expense");
    const [searchString, setSearchString] = useState("");



    // useEffect(() => {
    //     console.log("initial effect called")
    //     AsyncStorage.getItem("currentBudgetPage").then((page) => {
    //         if(page === "expenses" || page === "savings") {
    //             setSelectedPage(page);
    //         }
    //     }).catch((error) => {
    //         console.log("Error fetching previous page from Async Storage:", error);
    //     })
    // }, []);

    const {data, isLoading, reFetch} = useFetch({sql: "SELECT c.guid AS category_guid, c.name AS category_name, c.color AS category_color, c.type AS category_type, SUM(e.amount) as total_expenses, c.allocated_amount as allocated_amount FROM category c LEFT JOIN expense e ON e.category_guid = c.guid GROUP BY c.guid", args: []});

    useEffect(() => {
        reFetch()
    }, [selectedPage]);


    useEffect(() => {
        const unsubscribe = navigation.addListener("focus", () => {

            reFetch();
        })

        const t = () => {
            console.log("unsubscribed")
            unsubscribe();
        }
        return t;
    }, [navigation])


    const handlePageSelection = (page: "expense" | "saving") => {
        setSelectedPage(page);
    };

    const handleCategoryPress = (item: {[column: string]: any;}) => {
        router.push({pathname: "/category", params: {category_guid: item.category_guid, category_name: item.category_name}})
    }

    const filteredData = useMemo(() => {
        return data.filter((item) => {
            if(item.category_type !== selectedPage) {
                return false
            }
            return item.category_name.toLowerCase().includes(searchString.toLowerCase());
        })
    }, [data, searchString, selectedPage]);

    return (
        <SafeAreaView style={[styles.safeAreaViewStyle, {backgroundColor: containerColor}]}>
            <View style={{flex: 1, marginHorizontal: 10}}>
            <BudgetHeader selectedPage={selectedPage} handlePageSelection={handlePageSelection}/>
            <TextInputBar style={{marginBottom: 20}} value={searchString} onChangeText={setSearchString} placeholder='Search...'></TextInputBar>

            <Plus onPress={() => {
                router.push({pathname: '/addCategory'});
            }}/>

            {isLoading ? (<LoadingSymbol/>) : (
               <FlatList 
                data={filteredData} 
                renderItem = {({item}) => <CategoryItem 
                    category={item.category_name} 
                    allocated_amount={item.allocated_amount ?? 0} 
                    color={item.category_color} 
                    category_guid={item.category_guid} 
                    total_expenses={item.total_expenses ?? 0} 
                    onPress={() => {
                        handleCategoryPress(item);
                    }}/>}
                keyExtractor={item => item.category_guid}
                ItemSeparatorComponent={() => {
                    return (<View style={styles.itemSeperatorStyle}/>);
                }}
                ListEmptyComponent={EmptyListCompenent}
                /> 
            )}
            </View>
        </SafeAreaView>
    );
}

const styles = StyleSheet.create({
    safeAreaViewStyle: {
        flex: 1,
    },
    itemSeperatorStyle: {
        marginVertical: 5,
    },
});