import React from "react";
import { FlatList, Pressable, useWindowDimensions, Image as RNImage } from "react-native";
import { Image as ExpoImage } from "expo-image";
import { img } from "../../../assets";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { useUser } from "../../../providers/UserDataProvider";
import CardContainer from "./CardContainer";

const LikedMusic = () => {
  const { userLikedProjects = [] } = useUser();
  const items = Array.isArray(userLikedProjects)
    ? userLikedProjects.slice(0, 6)
    : [];
  const { width: screenWidth } = useWindowDimensions();
  const numColumns = 3;
  const gap = 6;
  const containerGap = 10;
  const totalGap = gap * (numColumns - 1) + containerGap * 2;
  const itemWidth = (screenWidth - totalGap) / numColumns;
  return (
    <CardContainer
      label="Musiques likées"
      onPress={() => navigate(Routes.AllMyLikedMusic)}
    >
      <FlatList
        scrollEnabled={false}
        data={items}
        numColumns={numColumns}
        contentContainerStyle={{ gap: containerGap }}
        columnWrapperStyle={{ gap }}
        keyExtractor={(item) => item.id}
        renderItem={({ item }) => (
          <Pressable
            style={{ flex: 1 }}
            onPress={() =>
              navigate(Routes.MusicDetails, { projectId: item.id })
            }
          >
            {item?.coverUrl ? (
              <ExpoImage
                source={{ uri: item.coverUrl }}
                cachePolicy="memory-disk"
                priority="high"
                contentFit="cover"
                transition={100}
                style={{
                  height: itemWidth - containerGap,
                  borderRadius: 10,
                }}
              />
            ) : (
              <RNImage
                source={img.placeholder3}
                style={{
                  height: itemWidth - containerGap,
                  borderRadius: 10,
                }}
              />
            )}
          </Pressable>
        )}
      />
    </CardContainer>
  );
};

export default LikedMusic;