import { View, Text, Pressable } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background } from "../../assets";
import { gutters, Palette } from "../../styles";
import MusicCard from "./components/MusicCard";
import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
import { BlurView } from "expo-blur";
import { FONT_FAMILY } from "../../styles/Fonts";
import { SheetManager } from "react-native-actions-sheet";

const AllMyLikedMusic = () => {
  const [top, setTop] = useState(0);
  const [showMenu, setShowMenu] = useState(false);

  return (
    <Page
      headerType="NAVIGATION"
      backgroundImg={background.libraryBG}
      title="Musiques de lover"
      contentContainerStyle={{ paddingBottom: gutters * 2 }}
    >
      <View style={{ flex: 1 }}>
        <View style={{ gap: 10 }}>
          {Array.from({ length: 3 }).map((_, index) => (
            <MusicCard
              key={index}
              onPressMore={(posTop) => {
                setTop(posTop);
                if (showMenu) {
                  if (posTop === top) {
                    setShowMenu(false);
                  } else {
                    setShowMenu(false);
                    setTimeout(() => {
                      setShowMenu(true);
                    }, 300);
                  }
                } else {
                  setShowMenu(true);
                }
              }}
            />
          ))}
          {showMenu && (
            <Animated.View
              entering={FadeIn.duration(300).easing(Easing.ease)}
              exiting={FadeOut.duration(300).easing(Easing.ease)}
              style={{
                position: "absolute",
                right: 0,
                top: top,
                zIndex: 2,
              }}
            >
              <Pressable
                onPress={() => {
                  setShowMenu(false);
                  SheetManager.show("Delete");
                }}
              >
                <BlurView
                  intensity={20}
                  style={{
                    paddingHorizontal: 12,
                    paddingVertical: 10,
                    backgroundColor: Palette.glass,
                    borderRadius: 12,
                    overflow: "hidden",
                  }}
                >
                  <Text
                    style={{
                      fontSize: 14,
                      color: Palette.white,
                      fontFamily: FONT_FAMILY.InterRegular,
                    }}
                  >
                    Supprimer de la playlist
                  </Text>
                </BlurView>
              </Pressable>
            </Animated.View>
          )}
        </View>
      </View>
    </Page>
  );
};

export default AllMyLikedMusic;
