musicland/src/components/MoreMenu.js

import { BlurView } from "expo-blur";
import React from "react";
import { Platform, Pressable, Text, View } from "react-native";
import { SheetManager } from "react-native-actions-sheet";
import useMinuit from "react-native-minuit/src/hooks/useMinuit";
import Animated, { Easing, FadeIn, FadeOut } from "react-native-reanimated";
import { arrayRemove, playlistsRef } from "../config/firebase";
import { Palette } from "../styles";
import { FONT_FAMILY } from "../styles/Fonts";
import { Portal } from "@gorhom/portal";

const MoreBtn = ({ onPress, children }) => (
  <Pressable onPress={onPress}>
    <BlurView
      intensity={Platform.OS !== "ios" ? 70 : 30}
      tint="dark"
      style={{
        paddingHorizontal: 12,
        paddingVertical: 10,
        backgroundColor: Palette.glass,
        borderRadius: 12,
        overflow: "hidden",
      }}
    >
      {children}
    </BlurView>
  </Pressable>
);

const MoreMenu = ({
  visible = false,
  top = 0,
  position = null,
  onClose = () => {},
  inPlaylist = false,
  playlistId = null,
  projectId = null,
  extraItems = [],
}) => {
  const { setTooltip } = useMinuit();
  if (!visible) return null;

  const resolvedTop =
    typeof position?.top === "number"
      ? position.top
      : typeof top === "number"
        ? top
        : 0;
  const resolvedRight =
    typeof position?.right === "number" ? Math.max(position.right, 0) : null;
  const resolvedLeft =
    typeof position?.left === "number" ? Math.max(position.left, 0) : null;

  const removeFromPlaylist = async () => {
    try {
      if (inPlaylist && playlistId && projectId) {
        await playlistsRef
          .doc(playlistId)
          .update({ musics: arrayRemove(projectId), updatedAt: new Date() });
        setTooltip({ type: "success", text: "Supprimé de la playlist" });
      }
    } catch (e) {
      console.log("Remove from playlist error", e?.message);
      setTooltip({
        type: "error",
        text: e?.message || "Suppression impossible",
      });
    } finally {
      onClose?.();
    }
  };

  const addToPlaylist = () => {
    if (projectId) {
      SheetManager.show("Playlist", { payload: { projectId } });
    } else {
      SheetManager.show("Playlist");
    }
    onClose?.();
  };

  const anchorStyle = {
    position: "absolute",
    top: resolvedTop,
    zIndex: 2,
    elevation: 2,
  };

  if (resolvedRight != null) {
    anchorStyle.right = resolvedRight;
  } else if (resolvedLeft != null) {
    anchorStyle.left = resolvedLeft;
  } else {
    anchorStyle.right = 0;
  }

  return (
    <Portal>
      <View
        style={{
          position: "absolute",
          left: 0,
          right: 0,
          top: 0,
          bottom: 0,
          zIndex: 9999,
          elevation: 9999,
        }}
      >
        {/* Background overlay to close on outside press */}
        <Pressable
          onPress={onClose}
          style={{
            position: "absolute",
            left: 0,
            right: 0,
            top: 0,
            bottom: 0,
            zIndex: 1,
          }}
        />
        <Animated.View
          entering={FadeIn.duration(300).easing(Easing.ease)}
          exiting={FadeOut.duration(300).easing(Easing.ease)}
          style={anchorStyle}
        >
          <View style={{ gap: 2 }}>
            {inPlaylist && (
              <MoreBtn onPress={removeFromPlaylist}>
                <Text
                  style={{
                    fontSize: 14,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  Supprimer de la playlist
                </Text>
              </MoreBtn>
            )}

            <MoreBtn onPress={addToPlaylist}>
              <Text
                style={{
                  fontSize: 14,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterRegular,
                }}
              >
                Ajouter à une playlist
              </Text>
            </MoreBtn>

            {Array.isArray(extraItems) &&
              extraItems.map((item, idx) => (
                <MoreBtn
                  key={idx}
                  onPress={() => {
                    try {
                      item?.onPress?.();
                    } finally {
                      onClose?.();
                    }
                  }}
                >
                  <Text
                    style={{
                      fontSize: 14,
                      color: Palette.white,
                      fontFamily: FONT_FAMILY.InterRegular,
                    }}
                  >
                    {item?.label || "Action"}
                  </Text>
                </MoreBtn>
              ))}
          </View>
        </Animated.View>
      </View>
    </Portal>
  );
};

export default MoreMenu;