import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
import {useState, useEffect} from "react";
import {useNoticesStore} from "@/store/noticesStore";
import {NoticeCard} from "@/components/NoticeCard";
import { useLocalSearchParams } from "expo-router";
import { HStack } from "@gluestack-ui/themed";
import { Button, ButtonText } from "@components/ui/Button";
import { Actionsheet } from "@components/ui/Actionsheet";
export default function Notices() {
    const {notices, fetchNotices} = useNoticesStore();
    const [refreshing, setRefreshing] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    const params = useLocalSearchParams();
   console.log("GET params:", params);
    useEffect(() => {
        loadData();
    }, []);

    const loadData = async () => {
        setIsLoading(true);
        try {
            await fetchNotices();
            setError(null);
        } catch (err) {
            setError(err);
        } finally {
            setIsLoading(false);
        }
    };

    let filteredNotices = notices;

    if (params.sort) {
        if( params.sort === "latest") {
        filteredNotices = [...filteredNotices].sort(
            (a, b) => new Date(b.publishDate) - new Date(a.publishDate)
        );
        }
    }

    if(params.category) {
        filteredNotices = filteredNotices.filter(
            (notice) => notice.category === params.category
        );
    }

    const onRefresh = async () => {
        setRefreshing(true);
        try {
            await fetchNotices();
        } catch (err) {
            setError(err);
        } finally {
            setRefreshing(false);
        }
    };

    if (isLoading && !refreshing) {
        return <ActivityIndicator/>;
    }

    if (error) {
        return <Text>Nie udało sie pobrać listy. {error.message}</Text>;
    }


    return (

        <FlatList
            key={2}
            data={filteredNotices}
            numColumns={2}
            columnContainerClassName="m-2"
            columnWrapperClassName="gap-2 m-2"
            renderItem={({item}) => <NoticeCard notice={item}/>}
            refreshControl={
                <RefreshControl
                    refreshing={refreshing}
                    onRefresh={onRefresh}
                    colors={["#3b82f6"]}
                    tintColor="#3b82f6"
                />
            }
        />
    );
}