import { Season } from "@/apis/seasonApi";
import { Show } from "@/apis/showApi";
import { router } from "expo-router";
import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";

export default function ShowBox({
  show,
  displayedSeason,
  shadow = true,
}: {
  show: Show;
  displayedSeason?: Season;
  shadow?: boolean;
}) {
  const goToShow = React.useCallback((id: number) => {
    router.push({ pathname: "/showDetails", params: { id: String(id) } });
  }, []);

  return (
    <TouchableOpacity
      onPress={() => goToShow(Number(show.id))}
      style={
        !shadow
          ? [
              styles.showContainer,
              { backgroundColor: "#1b1e2b", paddingBottom: 0 },
            ]
          : [
              styles.showContainer,
              styles.shadow,
              { backgroundColor: "#1b1e2b" },
            ]
      }
    >
      <View style={styles.showImageContainer}>
        <Image source={{ uri: show.thumbnailUri }} 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}
            {displayedSeason.startDate
              ? ` (${new Date(displayedSeason.startDate).getFullYear()})`
              : ""}
          </Text>
        ) : null}

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

        <View style={styles.showGenreTagContainer}>
          {/* {show.genres.map((genre: string) => (
            <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,
  },
});