fltr-app/app/(tabs)/index.tsx

import styles from "@/app/tabStyles/indexStyles";
import ShowCard from "@/components/ui/ShowCard";
import { useShowContext } from "@/contexts/ShowContext";
import { useStreamingServiceContext } from "@/contexts/StreamingServiceContext";
import * as Haptics from 'expo-haptics';
import { router } from "expo-router";
import React from "react";
import {
  ActivityIndicator,
  Image,
  Text,
  TouchableOpacity,
  View,
} from "react-native";
import {
  GestureHandlerRootView,
  ScrollView,
} from "react-native-gesture-handler";

export default function HomeScreen() {
  const { shows, error, loading } = useShowContext();
  const { streamingServices } = useStreamingServiceContext();
  const [filteredShows, setFilteredShows] = React.useState(shows);
  const [activeFilter, setActiveFilter] = React.useState<string>("all");

  const haptikFeedback = () => {
    Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
  }

  React.useEffect(() => {
    setFilteredShows(shows);
  }, [shows]);

  const handleFilter = (type: string) => {
    haptikFeedback();
    setActiveFilter(type);

    
    if (type === "all") {
      setFilteredShows(shows);
      return;
    }

    if (type === "live") {
      const filtered = shows.filter((show) => show.running);
      setFilteredShows(filtered);
      return;
    }

    if (type === activeFilter) {
        setFilteredShows(shows);
        setActiveFilter('all');
        return;
    }

    

    const filtered = shows.filter((show) =>
      show.streamingService.split(',').map(s => s.trim()).includes(type)
    );
    setFilteredShows(filtered);
  };

  const uniqueStreamingServices = React.useMemo(() => {
    const uniqueServices = new Set<string>();
    shows.forEach((show) => {
      const services = show.streamingService.split(', ').map(s => s.trim());
      services.forEach(service => uniqueServices.add(service));
    });
    return Array.from(uniqueServices);
  }, [shows]);

  if (loading) {
    return (
      <View
        style={[
          styles.mainContainer,
          { justifyContent: "center", alignItems: "center" },
        ]}
      >
        <ActivityIndicator size="large" color="#ffffff" />
      </View>
    );
  }

  if (error) {
    return (
      <View
        style={[
          styles.mainContainer,
          { justifyContent: "center", alignItems: "center" },
        ]}
      >
        <Text>Error: {error}</Text>
      </View>
    );
  }

  return (
    <GestureHandlerRootView>
      <View style={styles.mainContainer}>
        <View style={styles.header}>
          <Text style={styles.title}>FLTR</Text>
        </View>
        <ScrollView contentContainerStyle={{ paddingBottom: 30 }}>
          <View style={styles.filterSection}>
            <ScrollView
              horizontal
              showsHorizontalScrollIndicator={false}
              contentContainerStyle={{
                alignItems: "center",
                paddingHorizontal: 10,
                gap: 10,
                marginLeft: 10,
              }}
            >
              {activeFilter !== "all" && (
                <TouchableOpacity
                  style={{
                    padding: 5,
                    height: 60,
                    width: 60,
                    alignItems: "center",
                    justifyContent: "center",
                    backgroundColor: "hsla(0, 0%, 29%, 1.00)",
                    borderRadius: 50,
                  }}
                  onPress={() => handleFilter("all")}
                >
                  <Text style={{fontWeight: 'bold', color: 'white'}}>ALLE</Text>
                </TouchableOpacity>
              )}
              {activeFilter !== "live" && (
                <TouchableOpacity
                  style={{
                    padding: 5,
                    height: 60,
                    width: 60,
                    alignItems: "center",
                    justifyContent: "center",
                    backgroundColor: "hsla(0, 0%, 29%, 1.00)",
                    borderRadius: 50,
                  }}
                  onPress={() => handleFilter("live")}
                >
                  <View style={{backgroundColor: "red", paddingHorizontal: 5, paddingVertical: 2, borderRadius: 5}}>
                    <Text style={{fontWeight: 'bold', color: 'white'}}>LIVE</Text>
                  </View>
                </TouchableOpacity>
              )}

              <View style={{
                height: 60,
                width: 2,
                backgroundColor: "hsla(0, 0%, 37%, 1.00)",
                marginHorizontal: 5,
                borderRadius: 5,

              }} />

              {uniqueStreamingServices.map((serviceName) => {
                const streamingService =
                  streamingServices[
                  `assets.images.streamingServices.${serviceName.toLowerCase()}`
                  ];
                return (
                  <TouchableOpacity
                    key={serviceName}
                    style={{
                      padding: 5,
                      backgroundColor: "hsla(0, 0%, 29%, 1.00)",
                      borderRadius: 50,
                      borderWidth: serviceName.includes(activeFilter) ? 2 : 0,
                      borderColor: "hsla(0, 100%, 50%, 1.00)",
                    }}
                    onPress={() => handleFilter(serviceName)}
                  >
                    <Image
                      source={{ uri: streamingService }}
                      style={{
                        width: 50,
                        height: 50,
                        borderRadius: 30,
                        resizeMode: "contain",
                      }}
                    />
                  </TouchableOpacity>
                );
              })}
            </ScrollView>
          </View>
          <View style={{ flex: 1, paddingHorizontal: 10 }}>
            {filteredShows.map((show) => {
              const showLiveBadge = show.running;

              return (
                <ShowCard
                  key={show.id}
                  title={show.title}
                  onPress={() =>
                    router.push({
                      pathname: "/showDetails",
                      params: {
                        id: String(show.id),
                        title: show.title,
                        bannerUri: show.bannerUri,
                        description: show.description,
                        concept: show.concept,
                        genres: show.genres,
                        streamingService: show.streamingService,
                        logoUri: show.logoUrl,
                        running: String(show.running),
                      },
                    })
                  }
                  imageUri={show.bannerUri}
                  streamingServicesUris={show.streamingService.split(', ').map(s => streamingServices[`assets.images.streamingServices.${s.toLowerCase()}`])}
                  genres={show.genres}
                  {...(showLiveBadge
                    ? {
                      liveBadgeText: "LIVE",
                      liveBadgeContainerStyle: styles.liveBadgeContainer,
                    }
                    : {})}
                />
              );
            })}
          </View>
        </ScrollView>
      </View>
    </GestureHandlerRootView>
  );
}