// import React from "react"
import {FlatList, Text, ActivityIndicator, RefreshControl} from "react-native";
import {useState, useEffect} from "react";
import { Ionicons } from "@expo/vector-icons";
import {useNoticesStore} from "@/store/noticesStore";
import {NoticeCard} from "@/components/NoticeCard";
import { useLocalSearchParams } from "expo-router";
import { HStack } from "@/components/ui/hstack"
import { Box } from "@/components/ui/box"
import { Button, ButtonText, ButtonIcon } from "@/components/ui/button";
import {
  Actionsheet,
  ActionsheetContent,
  ActionsheetItem,
  ActionsheetItemText,
  ActionsheetDragIndicator,
  ActionsheetDragIndicatorWrapper,
  ActionsheetBackdrop,
} from "@/components/ui/actionsheet"
import { useRouter } from "expo-router";

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

    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);
        }
    };

 const router = useRouter();

    let filteredNotices = notices;
    let filterActive = false;
    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
        );
        filterActive = true;
    }

    if(params.attribute) {
        filterActive = true;
    }
    
    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 (
<>
    <Box className="flex-row p-2 pt-4 pb-4 bg-white items-center justify-between">
     <Button variant="outline" onPress={() => setShowActionsheet(true)}>
        <ButtonText>Filtry</ButtonText>
        <Ionicons name="filter-outline" size={20} color="black" />
      </Button>
      {filterActive && (
      <Button variant="link" onPress={() => router.replace("/notices")}>
        <ButtonText>Wyczyść</ButtonText>
        </Button>)}
      </Box>
          <Actionsheet isOpen={showActionsheet} onClose={handleClose}>
        <ActionsheetBackdrop />
        <ActionsheetContent>
          <ActionsheetDragIndicatorWrapper>
            <ActionsheetDragIndicator />
          </ActionsheetDragIndicatorWrapper>
          <ActionsheetItem>
            <ActionsheetItemText>Kategoria</ActionsheetItemText>
          </ActionsheetItem>
        </ActionsheetContent>
      </Actionsheet>
        <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"
                />
            }
        />
        </>
    );
}