musicland/src/screens/Library/AllMyPlaylist.web.js

import { BlurView } from 'expo-blur'
import React, { useCallback, useMemo, useState } from 'react'
import { Image, Pressable, Text, View } from 'react-native'
import { SheetManager } from 'react-native-actions-sheet'
import { useGlobal } from 'reactn'
import { background, icons } from '../../assets'
import MoreMenu from '../../components/MoreMenu'
import { playlistsRef, projectsRef } from '../../config/firebase'
import useDataFromArrayDocId from '../../hooks/useDataFromArrayId'
import usePlaylistCreationGuard from '../../hooks/usePlaylistCreationGuard'
import useDataFromRef from '../../hooks/useDataFromRef'
import useNavigateToMusicDetails from '../../hooks/useNavigateToMusicDetails'
import usePlayer from '../../hooks/usePlayer'
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 { getProjectLikes, LIKE_TARGET } from '../../utils/likes'
import MusicCard from './components/MusicCard'

const AllMyPlaylist = ({ route }) => {
  const { playListId } = route?.params || {}
  const [, setTooltip] = useGlobal('_tooltip')
  const { userPlaylists = [] } = useUser()
  const ensureCanCreatePlaylist = usePlaylistCreationGuard()
  const [selectedPlaylistId, setSelectedPlaylistId] = useState(playListId || null)
  const { data: playlist } = useDataFromRef({
    ref: selectedPlaylistId ? playlistsRef.doc(selectedPlaylistId) : null,
    simpleRef: true,
    listener: true,
    condition: !!selectedPlaylistId,
    refreshArray: [selectedPlaylistId],
  })

  // Fetch projects by ids from playlist.musics
  const { data: musics } = useDataFromArrayDocId({
    ref: projectsRef,
    arrayId: Array.isArray(playlist?.musics) ? playlist.musics : [],
    condition: Array.isArray(playlist?.musics) && playlist.musics.length > 0,
    refreshArray: [selectedPlaylistId, playlist?.musics?.length || 0],
  })
  const [menuPosition, setMenuPosition] = useState(null)
  const [showMenu, setShowMenu] = useState(false)
  const [selectedProjectId, setSelectedProjectId] = useState(null)
  const navigateToMusicDetails = useNavigateToMusicDetails()
  const { setQueue } = usePlayer() || {}

  const playlistQueueItems = useMemo(() => {
    if (!Array.isArray(musics)) return []
    return musics
      .map((project) => {
        const projectId =
          typeof project?.id === 'string' ? project.id : (project?.projectId ?? null)
        const songUrl =
          typeof project?.songUrl === 'string' && project.songUrl.length > 0
            ? project.songUrl
            : null
        if (!songUrl) return null
        const descriptorId = projectId ? `project-${projectId}` : songUrl
        return {
          id: descriptorId,
          uri: songUrl,
          songUrl,
          title: project?.title || 'Sans titre',
          artist: project?.userName || '',
          artwork: project?.coverUrl ?? null,
          coverUrl: project?.coverUrl ?? null,
          metadata: {
            projectId,
            playlistId: selectedPlaylistId ?? null,
            playlistName: playlist?.name ?? null,
          },
          context: {
            projectId,
            playlistId: selectedPlaylistId ?? null,
            playlistName: playlist?.name ?? null,
          },
        }
      })
      .filter(Boolean)
  }, [musics, playlist?.name, selectedPlaylistId])

  const handlePlayFromPlaylist = useCallback(
    (project) => {
      if (!project?.id) return
      if (Array.isArray(playlistQueueItems) && playlistQueueItems.length > 0) {
        const queueIndex = playlistQueueItems.findIndex(
          (item) => item?.metadata?.projectId === project.id
        )
        if (queueIndex >= 0 && typeof setQueue === 'function') {
          setQueue({
            items: playlistQueueItems,
            id: selectedPlaylistId,
            type: 'playlist',
            name: playlist?.name ?? null,
            index: queueIndex,
          })
        }
      }
      navigateToMusicDetails({
        projectId: project.id,
        songUrl: project?.songUrl,
        project,
      })
    },
    [navigateToMusicDetails, playlist?.name, playlistQueueItems, selectedPlaylistId, setQueue]
  )

  // delete playlist
  const confirmDelete = () => {
    SheetManager.show('Delete', {
      payload: {
        title: 'Supprimer la playlist',
        message: 'Es-tu sûr de vouloir supprimer cette playlist ?',
        onConfirm: async () => {
          try {
            if (selectedPlaylistId) {
              await playlistsRef.doc(selectedPlaylistId).delete()
              setTooltip({ type: 'success', text: 'Playlist supprimée' })
            }
          } catch (e) {
            console.log('Delete playlist error', e?.message)
            setTooltip({
              type: 'error',
              text: e?.message || 'Suppression impossible',
            })
          }
        },
      },
    })
  }

  const openAddTracks = useCallback(() => {
    if (!selectedPlaylistId) return

    SheetManager.show('PlaylistAddTracks', {
      payload: {
        playlistId: selectedPlaylistId,
        existingMusicIds: Array.isArray(playlist?.musics) ? playlist.musics : [],
      },
    })
  }, [playlist?.musics, selectedPlaylistId])

  const handleCreatePlaylistPress = useCallback(() => {
    if (!ensureCanCreatePlaylist()) {
      return
    }

    SheetManager.show('Playlist', {
      payload: { startAtCreate: true },
    })
  }, [ensureCanCreatePlaylist])

  return (
    <Page
      headerType="NAVIGATION"
      backgroundImg={background.libraryBG2Web}
      title="Mes Playlists"
      width={'80%'}
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
      rightComponent={() => (
        <>
          {selectedPlaylistId != null && (
            <View style={{ flexDirection: 'row', alignItems: 'center', gap: 10 }}>
              <Pressable onPress={openAddTracks}>
                <BlurView intensity={20} tint="dark" style={styles.addTracksButton}>
                  <Text numberOfLines={1} style={styles.addTracksText}>
                    Ajouter des morceaux
                  </Text>
                </BlurView>
              </Pressable>
              <Pressable onPress={confirmDelete}>
                <Image source={icons.trash} style={{ width: 24, height: 24 }} />
              </Pressable>
            </View>
          )}
        </>
      )}
    >
      <View style={{ flexDirection: 'row', gap: 20 }}>
        <View
          style={{
            flex: 1,
            padding: 10,
            borderRadius: 12,
            backgroundColor: Palette.ultraLightWhite,
            ...Style.defaultBorder,
          }}
        >
          <View style={{ flex: 1, gap: 12 }}>
            <View style={{ gap: 8 }}>
              {(Array.isArray(userPlaylists) ? userPlaylists : []).map((item) => {
                const isSelected = selectedPlaylistId === item?.id

                return (
                  <Pressable key={item?.id} onPress={() => setSelectedPlaylistId(item?.id)}>
                    <View
                      style={{
                        borderRadius: 14,
                        overflow: 'hidden',
                        borderWidth: 1,
                        borderColor: Palette.transparentWhite,
                        transform: [{ scaleX: isSelected ? 1.04 : 1 }],
                      }}
                    >
                      <BlurView
                        intensity={30}
                        style={{
                          ...Style.containerSpaceBetween,
                          minHeight: 59,
                          paddingHorizontal: 16,
                          paddingVertical: 12,
                        }}
                      >
                        <Text
                          style={{
                            flex: 1,
                            fontSize: isSelected ? 18 : 16,
                            color: Palette.white,
                            fontFamily: isSelected
                              ? FONT_FAMILY.InterSemiBold
                              : FONT_FAMILY.InterRegular,
                            marginRight: 12,
                            flexShrink: 1,
                          }}
                        >
                          {item?.name || 'Sans nom'}
                        </Text>
                        <Pressable>
                          <Image
                            source={icons.chevronDown}
                            style={{
                              ...size({ size: 15 }),
                              transform: [{ rotate: '-90deg' }],
                            }}
                            resizeMode="contain"
                          />
                        </Pressable>
                      </BlurView>
                    </View>
                  </Pressable>
                )
              })}
            </View>
            <Pressable onPress={handleCreatePlaylistPress}>
              <View
                style={{
                  borderRadius: 12,
                  overflow: 'hidden',
                  borderWidth: 1,
                  borderColor: Palette.transparentWhite,
                }}
              >
                <BlurView
                  intensity={30}
                  style={{
                    ...Style.containerSpaceBetween,
                    paddingHorizontal: 16,
                    minHeight: 59,
                    paddingVertical: 12,
                  }}
                >
                  <Text
                    style={{
                      fontSize: 16,
                      color: Palette.white,
                      fontFamily: FONT_FAMILY.InterSemiBold,
                    }}
                  >
                    Ajouter une playlist
                  </Text>
                  <Image source={icons.add} style={size({ size: 20 })} resizeMode="contain" />
                </BlurView>
              </View>
            </Pressable>
          </View>
        </View>
        <View style={{ flex: 2, gap: 10 }}>
          {Array.isArray(musics) &&
            musics.map((p) => (
              <MusicCard
                key={p.id}
                title={p?.title}
                subtitle={p?.userName}
                imageUri={p?.coverUrl || null}
                projectId={p?.id}
                likedBy={getProjectLikes(p, LIKE_TARGET.SONG)}
                likeTarget={LIKE_TARGET.SONG}
                onPress={() => handlePlayFromPlaylist(p)}
                onPressMore={(posTop) => {
                  setSelectedProjectId(p.id)
                  setMenuPosition(posTop)
                  setShowMenu((prev) => !prev || posTop?.top !== (menuPosition?.top ?? null))
                }}
              />
            ))}

          <MoreMenu
            visible={showMenu}
            top={menuPosition?.top ?? 0}
            position={menuPosition}
            onClose={() => setShowMenu(false)}
            inPlaylist
            playlistId={selectedPlaylistId}
            projectId={selectedProjectId}
          />
        </View>
      </View>
    </Page>
  )
}

export default AllMyPlaylist

const styles = {
  addTracksButton: {
    paddingHorizontal: 12,
    paddingVertical: 8,
    borderRadius: 999,
    overflow: 'hidden',
    backgroundColor: Palette.glass,
  },
  addTracksText: {
    color: Palette.white,
    fontSize: 12,
    fontFamily: FONT_FAMILY.InterSemiBold,
  },
}