fltr-app/app/showDetails.tsx

import StackHeader from "@/components/ui/StackHeader";
import { useLocalSearchParams, router } from "expo-router";
import React from "react";
import {
  Dimensions,
  Image,
  ScrollView,
  Text,
  TouchableOpacity,
  View,
} from "react-native";

import styles from "./stackStyles/showDetailStyles";
import { parseQueryParams } from "expo-router/build/fork/getStateFromPath-forks";
export default function ShowDetails() {
  const { bannerUri, description, concept, genres, streamingService } =
    useLocalSearchParams();
  const [selectedParticipants, setSelectedParticipants] =
    React.useState<boolean>(true);
  const [selectedSeason, setSelectedSeason] = React.useState<number>(1);

  return (
    <View style={styles.mainContainer}>
      <StackHeader />
      <ScrollView
        showsVerticalScrollIndicator={false}
        contentContainerStyle={{
          paddingBottom: Dimensions.get("window").height * 0.1,
        }}
      >
        <Image
          source={{
            uri: "https://images.plus.rtl.de/watch/859291/artwork_square/c3-ni-th-jc/are-you-the-one",
          }}
          style={styles.showImage}
        />
        <View style={styles.showMainInfoSection}>
          <Text style={styles.showInfoText}>10 Staffeln</Text>
          <View style={styles.dot} />
          <Text style={styles.showInfoText}>442 Teilnehmer</Text>
          <View style={styles.dot} />
          <Text style={styles.showInfoText}>RTL +</Text>
        </View>

        <View style={styles.showBannerLogoContainer}>
          <Image
            source={{
              uri: bannerUri as string,
            }}
            style={styles.showBannerLogo}
            resizeMode="cover"
          />
        </View>
        <View style={styles.infoContainner}>
          <TouchableOpacity onPress={() => setSelectedParticipants(true)}>
            <Text
              style={[
                styles.infoLabel,
                {
                  fontWeight: selectedParticipants ? "bold" : "normal",
                  color: selectedParticipants ? "#199edb" : "hsl(0, 0%, 65%)",
                },
              ]}
            >
              Teilnehmer
            </Text>
          </TouchableOpacity>
          <TouchableOpacity onPress={() => setSelectedParticipants(false)}>
            <Text
              style={[
                styles.infoLabel,
                {
                  fontWeight: !selectedParticipants ? "bold" : "normal",
                  color: !selectedParticipants ? "#199edb" : "hsl(0, 0%, 65%)",
                },
              ]}
            >
              Details
            </Text>
          </TouchableOpacity>
        </View>
        {selectedParticipants ? (
          <>
            <View style={styles.seasonsSection}>
              <Text style={styles.seasonsLabel}>Staffeln</Text>
              <ScrollView
                horizontal
                showsHorizontalScrollIndicator={false}
                contentContainerStyle={styles.seasonList}
              >
                {[...Array(10).keys()].map((season) => (
                  <TouchableOpacity
                    key={season}
                    style={[
                      styles.seasonContainer,
                      {
                        backgroundColor:
                          selectedSeason === season + 1
                            ? "#199edb"
                            : "hsl(0, 0%, 20%)",
                      },
                    ]}
                    onPress={() => setSelectedSeason(season + 1)}
                  >
                    <Text style={styles.seasonLabel}>{season + 1}</Text>
                  </TouchableOpacity>
                ))}
              </ScrollView>
            </View>

            <View
              style={[
                styles.participantsDetailsContainer,
                styles.participantSection,
              ]}
            >
              {[0, 1, 2].map((column) => (
                <TouchableOpacity
                  key={column}
                  style={styles.participantContainer}
                  onPress={() =>
                    router.push({
                      pathname: "/participant",
                    })
                  }
                >
                  {column === 0 && (
                    <>
                      <Image
                        source={{
                          uri: "https://amp.infranken.de/storage/image/2/2/7/8/4408722_hat-calvin-o-bei-vip-are-you-the-one-eine-favoritin-die-indizien_noscale_1EywMa_HqGfqa.jpg",
                        }}
                        style={{
                          width: "100%",
                          height: "100%",
                          borderRadius: 10,
                        }}
                      />

                      <Text style={styles.participantLabel}>
                        Calvin Lesra Ogara
                      </Text>
                    </>
                  )}
                  {column === 1 && (
                    <>
                      <Image
                        source={{
                          uri: "https://content.promiflash.de/article-images/square600/love-island-granate-sandra-2.jpg",
                        }}
                        style={{
                          width: "100%",
                          height: "100%",
                          borderRadius: 10,
                        }}
                      />

                      <Text style={styles.participantLabel}>Sandra Janina</Text>
                    </>
                  )}
                  {column === 2 && (
                    <>
                      <Image
                        source={{
                          uri: "https://static.wikia.nocookie.net/toohottohandle/images/e/e4/GER_S1_Kevin_Njie.jpg/revision/latest?cb=20240225192711",
                        }}
                        style={{
                          width: "100%",
                          height: "100%",
                          borderRadius: 10,
                        }}
                      />

                      <Text style={styles.participantLabel}>Kevin Njie</Text>
                    </>
                  )}
                </TouchableOpacity>
              ))}
              {[0, 1, 2].map((column) => (
                <View
                  key={column}
                  style={[styles.participantContainer, { marginTop: 20 }]}
                >
                  {column === 0 && (
                    <>
                      <Image
                        source={{
                          uri: "https://content.promiflash.de/article-images/square600/sidar-are-you-the-one-kandidat-2023.jpg",
                        }}
                        style={{
                          width: "100%",
                          height: "100%",
                          borderRadius: 10,
                        }}
                      />
                      <Text style={styles.participantLabel}>Single Sidar</Text>
                    </>
                  )}
                </View>
              ))}
            </View>
          </>
        ) : (
          <View style={styles.participantsDetailsContainer}>
            <Text style={styles.detailTitle}>Beschreibung:</Text>
            <Text style={styles.detailLabel}>{description}</Text>
            <Text style={styles.detailTitle}>Konzept:</Text>
            <Text style={styles.detailLabel}>{concept}</Text>
            <Text style={styles.detailTitle}>Genres:</Text>
            <Text style={styles.detailLabel}>{genres}</Text>
            <Text style={styles.detailTitle}>Produktion:</Text>
            <Text style={styles.detailLabel}>{streamingService}</Text>
          </View>
        )}
      </ScrollView>
    </View>
  );
}