import styles from "@/app/styles/indexStyles";
import ShowCard from "@/components/ui/ShowCard";
import { useShowContext } from "@/contexts/ShowContext";
import { router } from "expo-router";
import React from "react";
import { Text, View } from "react-native";
import {
  GestureHandlerRootView,
  ScrollView,
} from "react-native-gesture-handler";

export default function HomeScreen() {
  const { shows } = useShowContext();

  return (
    <GestureHandlerRootView>
      <View style={styles.mainContainer}>
        <View style={styles.header}>
          <Text style={styles.title}>FLTR</Text>
        </View>
        <ScrollView contentContainerStyle={{ paddingBottom: 30 }}>
          {shows.map((show) => {
            const showLiveBadge = show.endDate === null;
            return (
              <ShowCard
                key={show.id}
                onPress={() => router.push("/showDetails")}
                imageUri={show.bannerUri || show.thumbnailUri}
                streamingServiceUri={show.streamingService}
                genres={show.genres}
                {...(showLiveBadge
                  ? {
                      liveBadgeText: "LIVE",
                      liveBadgeContainerStyle: styles.liveBadgeContainer,
                    }
                  : {})}
              />
            );
          })}
        </ScrollView>
      </View>
    </GestureHandlerRootView>
  );
}