import { View, Text, Image, Platform, Pressable } from "react-native";
import React from "react";
import { BlurView } from "expo-blur";
import { img } from "../../../assets";
import { Palette, Style } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import SubscriptionBadge from "../../../components/SubscriptionBadge";

const PlaybacksCard = ({
  rank = 1,
  title = "Sans titre",
  artist = "MusicLand",
  thumbnailUrl = null,
  coverUrl = null,
  onPress = () => null,
  subscriptionLevel = null,
}) => {
  const resolveUri = (value) =>
    typeof value === "string" && value.trim().length > 0 ? value : null;
  const imageUri = resolveUri(thumbnailUrl) ?? resolveUri(coverUrl);

  return (
    <Pressable onPress={onPress}>
      <BlurView
        intensity={Platform.OS === "web" ? 40 : Platform.OS !== "ios" ? 10 : 20}
        tint="dark"
        style={{
          ...Style.containerSpaceBetween,
          paddingHorizontal: 8,
          paddingVertical: 4,
          borderRadius: 12,
          backgroundColor: Palette.glass,
          overflow: "hidden",
        }}
        // experimentalBlurMethod={
        //   Platform.OS !== "ios" ? "dimezisBlurView" : "none"
        // }
      >
        <View
          style={{
            ...Style.containerRow,
            gap: 15,
            alignItems: "center",
            justifyContent: "space-between",
            width: "100%",
          }}
        >
          <View
            style={{
              ...Style.containerRow,
              gap: 15,
              alignItems: "center",
              flex: 1,
            }}
          >
            <Text
              style={{
                fontSize: 22,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterSemiBold,
              }}
            >
              {rank}
            </Text>
            <Image
              source={imageUri ? { uri: imageUri } : img.placeholder3}
              style={{ width: 67, height: 108, borderRadius: 16 }}
            />
            <View style={{ flex: 1 }}>
              <Text
                style={{
                  fontSize: 16,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterMedium,
                }}
                numberOfLines={1}
              >
                {title}
              </Text>
              <View
                style={{
                  ...Style.containerRow,
                  gap: 6,
                  flexWrap: "wrap",
                  alignItems: "center",
                  justifyContent: "space-between",
                }}
              >
                <Text
                  style={{
                    fontSize: 12,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterRegular,
                    flexShrink: 1,
                  }}
                  numberOfLines={1}
                >
                  {artist}
                </Text>
              </View>
            </View>
          </View>
          <SubscriptionBadge level={subscriptionLevel} size={36} />
        </View>
      </BlurView>
    </Pressable>
  );
};

export default PlaybacksCard;