import { Season, Show } from "@/app/types";
import GenreTag from "@/components/discovery/GenreTag";
import { useNavigation } from "@react-navigation/native";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function ShowBox({
  show,
  displayedSeason,
  shadow = true,
}: {
  show: Show;
  displayedSeason?: Season;
  shadow?: boolean;
}) {
  const navigation = useNavigation();

  return (
    <TouchableOpacity
      onPress={() => navigation.navigate("ShowDetail", { show })}
      style={
        !shadow
          ? [styles.showContainer, { backgroundColor: "#1b1e2b", paddingBottom: 0 }]
          : [styles.showContainer, styles.shadow, { backgroundColor: "#1b1e2b" }]
      }
    >
      <View style={styles.showImageContainer}>
        <Image source={{ uri: show.thumbnailUrl }} style={styles.showImage} />
        {show.running && <Text style={styles.runningTag}>LIVE</Text>}
      </View>

      <View style={styles.showRight}>
        <Text style={styles.showTitle}>{show.title}</Text>

        {displayedSeason ? (
          <Text style={{ fontWeight: "bold", color: "#aac0ce" }}>
            Staffel {displayedSeason.seasonNumber} (
            {new Date(displayedSeason.startDate).getFullYear()})
          </Text>
        ) : null}

        <Text style={styles.showDescription} numberOfLines={8} ellipsizeMode="tail">
          {show.description}
        </Text>

        <View style={styles.showGenreTagContainer}>
          {show.genre.split(", ").map((genre: any) => (
            <GenreTag key={genre}>{genre}</GenreTag>
          ))}
        </View>
      </View>
    </TouchableOpacity>
  );
}

const styles = StyleSheet.create({
  showTitle: {
    fontSize: 18,
    fontWeight: "bold",
    textAlign: "left",
    color: "#ffffff",
  },
  showDescription: {
    marginTop: 5,
    fontSize: 12,
    textAlign: "left",
    flex: 1,
    color: "#cccccc",
  },
  showContainer: {
    width: "100%",
    height: 220,
    alignItems: "center",
    padding: 10,
    borderRadius: 10,
    flexDirection: "row",
    justifyContent: "flex-start",
    backgroundColor: "#1b1e2b",
  },
  shadow: {
    shadowColor: "#000",
    shadowOffset: { width: 0, height: 2 },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,
    elevation: 5,
  },
  showImageContainer: {
    width: 140,
    height: "100%",
    backgroundColor: "#2b2e3b",
    borderRadius: 10,
  },
  showImage: {
    width: "100%",
    height: "100%",
    borderRadius: 10,
  },
  showRight: {
    flex: 1,
    height: "100%",
    flexDirection: "column",
    backgroundColor: "#1b1e2b",
    paddingLeft: 10,
    paddingVertical: 2,
  },
  showGenreTagContainer: {
    flexDirection: "row",
    justifyContent: "flex-start",
    flexWrap: "wrap",
    gap: 5,
    marginTop: 2,
    backgroundColor: "#1b1e2b",
  },
  runningTag: {
    position: "absolute",
    top: 3,
    left: 3,
    backgroundColor: "red",
    opacity: 0.65,
    color: "white",
    padding: 5,
    borderRadius: 90,
  },
});
