import { View, FlatList} from 'react-native';
import { useEffect, useState } from 'react'
import { useAuthStore } from "@/store/authStore";
import { Heading } from '@/components/ui/heading';
import { Text } from '@/components/ui/text';
import { Link } from 'expo-router';
import { Pressable } from '@/components/ui/pressable';
// import axios from 'axios';
import {listCategories} from "@/api/categories";


export function CategorySection({notices, title}) {
  const token = useAuthStore((state) => state.token);
  
  const [categoryMap, setCategoryMap] = useState({});

  useEffect(() => {
    if(token){
    const fetchCategories = async () => {
            let data = await listCategories();
                  if (Array.isArray(data)) {
                      setCategoryMap(data);
                  }  
                }

    fetchCategories();
  }
  }, [token]);
    

  const categories = Array.from(
    new Set(notices.map((notice) => notice.category))
  ).filter(Boolean);

  const getCount = (category) =>
    notices.filter((notice) => notice.category === category).length;

  console.log("CategoryMap:", categoryMap);

  if(!categoryMap) {
    return  null;
  }

return (
    <View className="mb-6">
      <Heading className="text-2xl font-bold mb-4 mt-4">{title}</Heading>
      <FlatList
        data={categories}
        keyExtractor={(item) => item}
        horizontal
        showsHorizontalScrollIndicator={false}
        contentContainerStyle={{ paddingHorizontal: 8, gap: 12 }}
        renderItem={({ item }) => {
          const categoryObj = categoryMap.find((cat) => cat.value === item);
          return (
            <Link href={`/notices?category=${item}`} asChild>
            <Pressable className="bg-gray-200 p-4 rounded-lg mr-2">
              <Text>
                {categoryObj ? categoryObj.label : item} ({getCount(item)})
              </Text>
            </Pressable>
            </Link>
          );
        }}
      />
    </View>
  );

}