musicland/src/screens/Library/components/SearchResultsList.js

import React, { useState } from "react";
import { Pressable, ScrollView, Text, View } from "react-native";
import { Image as ExpoImage } from "expo-image";
import { img } from "../../../assets";
import MoreMenu from "../../../components/MoreMenu";
import { Routes } from "../../../navigation";
import { navigate } from "../../../navigation/NavigationService";
import { Palette, Style } from "../../../styles";
import { FONT_FAMILY } from "../../../styles/Fonts";
import { size } from "../../../styles/Style";
import CreateLyricsHeader from "../../Writing/components/CreateLyricsHeader";
import MusicCard from "./MusicCard";

const EmptyText = ({ text }) => (
  <View style={{ flex: 1, alignItems: "center", paddingVertical: 16 }}>
    <Text
      style={{
        fontSize: 14,
        color: Palette.white,
        fontFamily: FONT_FAMILY.InterRegular,
        opacity: 0.8,
      }}
    >
      {text}
    </Text>
  </View>
);

const SearchResultsList = ({
  selected,
  filteredProjects,
  projectsLoading,
  loadMoreProjects,
  filteredUsers,
  usersLoading,
  loadMoreUsers,
  onResultSelected,
  contentContainerStyle,
  style,
}) => {
  const [menuPosition, setMenuPosition] = useState(null);
  const [showMenu, setShowMenu] = useState(false);
  const [selectedProjectId, setSelectedProjectId] = useState(null);

  const handleProjectPress = (projectId) => {
    navigate(Routes.MusicDetails, { projectId });
    onResultSelected?.();
  };

  const handleProfilePress = (userId) => {
    navigate(Routes.SingerProfile, { userId });
    onResultSelected?.();
  };

  return (
    <View style={[{ flex: 1 }, style]}>
      <ScrollView
        contentContainerStyle={{ paddingTop: 2, ...contentContainerStyle }}
        showsVerticalScrollIndicator={false}
      >
        {((!selected && (filteredProjects.length > 0 || projectsLoading)) ||
          selected === "Musiques") && (
          <View style={{ paddingHorizontal: 2 }}>
            <CreateLyricsHeader
              gradientProps={{
                start: { x: 0, y: 0 },
                end: { x: 0, y: 1 },
              }}
            >
              {filteredProjects.length > 0 && (
                <View style={{ gap: 10 }}>
                  {Array.isArray(filteredProjects) &&
                    filteredProjects.slice(0, 6).map((project) => (
                      <MusicCard
                        key={project.id}
                        title={project?.title || "Sans titre"}
                        subtitle={"MusicLand"}
                        imageUri={project?.coverUrl || null}
                        projectId={project?.id}
                        likedBy={project?.likedBy || []}
                        onPress={() => handleProjectPress(project.id)}
                        onPressMore={(positionTop) => {
                          setSelectedProjectId(project.id);
                          setMenuPosition(positionTop);
                          setShowMenu(
                            (previous) =>
                              !previous ||
                              positionTop?.top !== (menuPosition?.top ?? null),
                          );
                        }}
                      />
                    ))}
                  {(filteredProjects.length >= 6 || projectsLoading) && (
                    <Pressable
                      onPress={loadMoreProjects}
                      style={{ alignSelf: "center", marginTop: 6 }}
                    >
                      <Text
                        style={{
                          fontSize: 12,
                          color: Palette.white,
                          fontFamily: FONT_FAMILY.InterRegular,
                          opacity: projectsLoading ? 0.6 : 1,
                        }}
                      >
                        {projectsLoading ? "Chargement…" : "Charger plus"}
                      </Text>
                    </Pressable>
                  )}
                </View>
              )}
              {filteredProjects.length === 0 && !projectsLoading && (
                <EmptyText text={"Aucune musique trouvée"} />
              )}
            </CreateLyricsHeader>
          </View>
        )}
        {((!selected && (filteredUsers.length > 0 || usersLoading)) ||
          selected === "Profils") && (
          <View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
            <CreateLyricsHeader
              gradientProps={{ start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }}
            >
              {filteredUsers.length > 0 && (
                <View style={{ gap: 8 }}>
                  {Array.isArray(filteredUsers) &&
                    filteredUsers.slice(0, 5).map((user) => (
                      <Pressable
                        style={{ gap: 14, ...Style.containerRow }}
                        key={user.id}
                        onPress={() => handleProfilePress(user.id)}
                      >
                        <ExpoImage
                          source={
                            user?.pictureUrl ||
                            user?.profilePictureURL ||
                            user?.photoURL
                              ? {
                                  uri:
                                    user?.pictureUrl ||
                                    user?.profilePictureURL ||
                                    user?.photoURL,
                                }
                              : img.profile
                          }
                          cachePolicy="memory-disk"
                          priority="high"
                          contentFit="cover"
                          transition={100}
                          style={{
                            ...size({ size: 60 }),
                            borderRadius: 100,
                          }}
                        />
                        <Text
                          style={{
                            fontSize: 12,
                            color: Palette.white,
                            fontFamily: FONT_FAMILY.InterRegular,
                          }}
                        >
                          {user?.userName || "Utilisateur"}
                        </Text>
                      </Pressable>
                    ))}
                  {(filteredUsers.length >= 5 || usersLoading) && (
                    <Pressable
                      onPress={loadMoreUsers}
                      style={{ alignSelf: "center", marginTop: 6 }}
                    >
                      <Text
                        style={{
                          fontSize: 12,
                          color: Palette.white,
                          fontFamily: FONT_FAMILY.InterRegular,
                          opacity: usersLoading ? 0.6 : 1,
                        }}
                      >
                        {usersLoading ? "Chargement…" : "Charger plus"}
                      </Text>
                    </Pressable>
                  )}
                </View>
              )}
              {filteredUsers.length === 0 && !usersLoading && (
                <EmptyText text={"Aucun profil trouvé"} />
              )}
            </CreateLyricsHeader>
          </View>
        )}
        {selected === "Playbacks" && (
          <View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
            <CreateLyricsHeader
              gradientProps={{ start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }}
            >
              <EmptyText text={"Aucun playback trouvé"} />
            </CreateLyricsHeader>
          </View>
        )}
        {selected === "Clips" && (
          <View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
            <CreateLyricsHeader
              gradientProps={{ start: { x: 0, y: 0 }, end: { x: 0, y: 1 } }}
            >
              <EmptyText text={"Aucun clip trouvé"} />
            </CreateLyricsHeader>
          </View>
        )}
      </ScrollView>
      <MoreMenu
        visible={showMenu}
        top={menuPosition?.top ?? 0}
        position={menuPosition}
        onClose={() => setShowMenu(false)}
        inPlaylist={false}
        projectId={selectedProjectId}
      />
    </View>
  );
};

export default SearchResultsList;