import { View, Text, Pressable, Image, Platform } from "react-native";
import React from "react";
import CardContainer from "./CardContainer";
import { BlurView } from "expo-blur";
import { icons } from "../../../assets";
import Style, { size } from "../../../styles/Style";
import { Palette } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import { navigate } from "../../../navigation/NavigationService";
import { Routes } from "../../../navigation";
import { useUser } from "../../../providers/UserDataProvider";

const MyPlaylist = () => {
  const { userPlaylists = [] } = useUser();
  const playlists = Array.isArray(userPlaylists)
    ? userPlaylists.slice(0, 2)
    : [];
  return (
    <CardContainer
      label="Mes Playlists"
      onPress={() => navigate(Routes.AllMyPlaylist)}
    >
      <View style={{ gap: 8 }}>
        {playlists.map((item) => (
          <Pressable
            key={item.id}
            style={{ borderRadius: 12, overflow: "hidden" }}
            onPress={() =>
              navigate(Routes.PlaylistDetails, { playlistId: item.id })
            }
          >
            <BlurView
              intensity={20}
              style={{
                ...Style.containerSpaceBetween,
                height: 59,
                paddingHorizontal: 10,
              }}
              experimentalBlurMethod={
                Platform.OS !== "ios" ? "dimezisBlurView" : "none"
              }
            >
              <Text
                style={{
                  fontSize: 16,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterRegular,
                }}
              >
                {item?.name || "Sans nom"}
              </Text>
              <Image
                source={icons.chevronDown}
                style={{
                  ...size({ size: 15 }),
                  transform: [{ rotate: "-90deg" }],
                }}
                resizeMode="contain"
              />
            </BlurView>
          </Pressable>
        ))}
      </View>
    </CardContainer>
  );
};

export default MyPlaylist;
