import { BlurView } from "expo-blur";
import React from "react";
import { Image, Platform, Pressable, Text, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import { background, icons } from "../../assets";
import Page from "../../layouts/Page";
import { useUser } from "../../providers/UserDataProvider";
import { gutters, Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import { size } from "../../styles/Style";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";
const AllMyPlaylist = () => {
  const { userPlaylists = [] } = useUser();
  return (
    <Page
      headerType="NAVIGATION"
      backgroundImg={background.libraryBG}
      title="Mes Playlists"
      rightComponent={() => (
        <Pressable
          onPress={() =>
            SheetManager.show("Playlist", { payload: { startAtCreate: true } })
          }
        >
          <Image
            source={icons.add}
            style={size({ size: 20 })}
            resizeMode="contain"
          />
        </Pressable>
      )}
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
    >
      <View style={{ flex: 1 }}>
        <View style={{ gap: 8 }}>
          {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => (
            <Pressable
              key={item?.id}
              onPress={() =>
                navigate(Routes.PlaylistDetails, { playlistId: item?.id })
              }
            >
              <View style={{ borderRadius: 12, overflow: "hidden" }}>
                <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>
                  <Pressable>
                    <Image
                      source={icons.chevronDown}
                      style={{
                        ...size({ size: 15 }),
                        transform: [{ rotate: "-90deg" }],
                      }}
                      resizeMode="contain"
                    />
                  </Pressable>
                </BlurView>
              </View>
            </Pressable>
          ))}
        </View>
      </View>
    </Page>
  );
};

export default AllMyPlaylist;