import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
import {useState, useEffect} from "react";
import {useNoticesStore} from "@/store/noticesStore";
import {NoticeCard} from "@/components/NoticeCard";

export default function Notices() {
    const {notices, fetchNotices} = useNoticesStore();
    const [refreshing, setRefreshing] = useState(false);
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState(null);

    useEffect(() => {
        loadData();
    }, []);

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

    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={notices}
            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"
                />
            }
        />
    );
}