import React from "react";
import { Image, StyleSheet, Text, TouchableOpacity, View } from "react-native";

type ShowCardProps = {
  imageUri: string;
  streamingServicesUris: string[];
  liveBadgeText?: string;
  liveBadgeContainerStyle?: object;
  genres: string[];
  title: string;
  onPress?: () => void;
};

const ShowCard = ({
  imageUri,
  streamingServicesUris,
  liveBadgeText,
  liveBadgeContainerStyle,
  genres,
  onPress,
  title,
}: ShowCardProps) => {
  return (
    <TouchableOpacity
      style={styles.showContainer}
      activeOpacity={0.3}
      onPress={onPress}
    >
      <Image
        source={{
          uri: imageUri,
        }}
        style={[StyleSheet.absoluteFillObject, { borderRadius: 35 }]}
      />

      <View style={{ flexDirection: 'row', width: '100%', justifyContent: 'flex-end', padding: 10, gap: 5}}>
        {streamingServicesUris.length > 0 && streamingServicesUris.map((service) => (
          <Image
            key={service}
            source={{
              uri: service,
            }}
            style={{ height: 45, width: 45, resizeMode: 'contain', borderRadius: 100}}
          />

        ))}
      </View>

      {liveBadgeText && (
        <View style={liveBadgeContainerStyle}>
          <Text style={styles.liveBadgeText}>{liveBadgeText}</Text>
        </View>
      )}

      <View style={styles.titleSection}>
        <Text
          style={{
            color: "white",
            fontWeight: "bold",
            fontSize: 12,
          }}
        >
          {title}
        </Text>
      </View>
      <View style={styles.genreSection}>
        {genres.map((genre) => (
          <Text key={genre} style={styles.genreLabel}>
            {genre}
          </Text>
        ))}
      </View>
    </TouchableOpacity>
  );
};

const styles = StyleSheet.create({
  showContainer: {
    width: "100%",
    height: 220,
    backgroundColor: "transparent",
    alignSelf: "center",
    borderRadius: 35,
    marginTop: 20,
    borderWidth: 1.5,
    borderColor: "hsl(221, 39%, 15%)",
    shadowColor: "#000",
    shadowOffset: {
      width: 0,
      height: 1,
    },
    shadowOpacity: 0.18,
    shadowRadius: 1.0,
    elevation: 1,
  },
  streamingServiceIcon: {
    width: 45,
    height: 45,
    marginLeft: "auto",
    marginRight: 15,
    borderWidth: 1,
    borderColor: "white",
    borderRadius: 15,
    marginTop: 15,
  },
  liveBadgeContainer: {
    position: "absolute",
    top: 15,
    left: 20,
    backgroundColor: "red",
    borderRadius: 10,
    paddingVertical: 5,
    paddingHorizontal: 10,
  },
  liveBadgeText: {
    color: "white",
    fontWeight: "bold",
  },
  genreSection: {
    position: "absolute",
    bottom: 15,
    left: 20,
    flexDirection: "row",
    alignItems: "center",
    justifyContent: "space-evenly",
    gap: 5,
  },
  genreLabel: {
    color: "red",
    fontWeight: "bold",
    fontSize: 10,
    paddingVertical: 5,
    paddingHorizontal: 10,
    borderRadius: 10,
    fontStyle: "italic",
    backgroundColor: "rgba(255, 255, 255, 1)",
    overflow: "hidden",
  },
  titleSection: {
    width: "auto",
    height: 45,
    paddingHorizontal: 20,
    backgroundColor: "rgba(0, 0, 0, 0.6)",
    position: "absolute",
    top: 50,
    justifyContent: "center",
    alignItems: "flex-start",
    borderTopRightRadius: 15,
    borderBottomRightRadius: 15,
  },
});

export default ShowCard;