import { BlurView } from "expo-blur";
import React, { useState } from "react";
import { View } from "react-native";
import { background } from "../../assets";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { navigate } from "../../navigation/NavigationService";
import { useUser } from "../../providers/UserDataProvider";
import { gutters, Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import MusicCard from "./components/MusicCard";
import MoreMenu from "../../components/MoreMenu";

const AllMyLikedMusic = () => {
  const [top, setTop] = useState(0);
  const [showMenu, setShowMenu] = useState(false);
  const [selectedProjectId, setSelectedProjectId] = useState(null);
  const { userLikedProjects: projects } = useUser();

  return (
    <Page
      headerType="NAVIGATION"
      backgroundImg={background.libraryBG}
      title="Musiques de lover"
      contentContainerStyle={{ paddingBottom: gutters * 2 }}
    >
      <View style={{ flex: 1 }}>
        <View style={{ gap: 10 }}>
          {Array.isArray(projects) &&
            projects.map((item) => (
              <MusicCard
                key={item.id}
                title={item?.title || "Sans titre"}
                imageUri={item?.coverUrl || null}
                subtitle={"MusicLand"}
                projectId={item?.id}
                likedBy={item?.likedBy || []}
                onPress={() =>
                  navigate(Routes.MusicDetails, { projectId: item.id })
                }
                onPressMore={(posTop) => {
                  setSelectedProjectId(item.id);
                  setTop(posTop);
                  setShowMenu((prev) => !prev || posTop !== top);
                }}
              />
            ))}
          <MoreMenu
            visible={showMenu}
            top={top}
            onClose={() => setShowMenu(false)}
            inPlaylist={false}
            projectId={selectedProjectId}
          />
        </View>
      </View>
    </Page>
  );
};

export default AllMyLikedMusic;
