import { View, Image, ScrollView, Pressable, Platform } from 'react-native';
import React from 'react';
import Page from '../../layouts/Page';
import { background, icons } from '../../assets';
import SearchBar from '../../components/SearchBar';
import MyMusic from './components/MyMusic';
import BackTracks from './components/BackTracks';
import MyClips from './components/MyClips';
import LikedMusic from './components/LikedMusic';
import LikedPlayback from './components/LikedPlayback';
import LikedClips from './components/LikedClips';
import { responsiveHeight } from 'react-native-responsive-dimensions';
import MyPlaylist from './components/MyPlaylist';
import { navigate } from '../../navigation/NavigationService';
import { Routes } from '../../navigation';
import { useUser } from '../../providers/UserDataProvider';
import { Text } from 'react-native';
import { Palette } from '../../styles';
import { FONT_FAMILY } from '../../styles/Fonts';

const Library = () => {
  const {
    userProjects = [],
    userPlaybacks = [],
    userLikedProjects = [],
    userLikedPlaybacks = [],
    userPlaylists = [],
  } = useUser() || {};

  const hasMyMusic = Array.isArray(userProjects) && userProjects.length > 0;
  const hasBackTracks =
    Array.isArray(userPlaybacks) && userPlaybacks.length > 0;
  const hasLikedMusic =
    Array.isArray(userLikedProjects) && userLikedProjects.length > 0;
  const hasLikedPlayback =
    Array.isArray(userLikedPlaybacks) && userLikedPlaybacks.length > 0;
  const hasPlaylists = Array.isArray(userPlaylists) && userPlaylists.length > 0;

  const hasMyClips = false; // À modifier quand les vraies données seront disponibles
  const hasLikedClips = false; // À modifier quand les vraies données seront disponibles

  const hasAnySection =
    hasMyMusic ||
    hasBackTracks ||
    hasLikedMusic ||
    hasLikedPlayback ||
    hasPlaylists ||
    hasMyClips ||
    hasLikedClips;

  return (
    <Page backgroundImg={background.libraryBG} headerType='NONE'>
      <View style={{ gap: 17, paddingBottom: 20 }}>
        <Image source={icons.musicLandLogo} style={{ alignSelf: 'center' }} />
        <Pressable onPress={() => navigate(Routes.Research)}>
          <SearchBar
            textInputProps={{
              editable: false,
              onPress: () => navigate(Routes.Research),
            }}
          />
        </Pressable>
      </View>
      <View style={{ flex: 1 }}>
        <ScrollView
          contentContainerStyle={{
            flexGrow: 1,
            gap: 20,
            paddingBottom: responsiveHeight(20),
            paddingTop: Platform.OS !== 'android' ? 20 : 0,
          }}
          showsVerticalScrollIndicator={false}>
          {hasMyMusic && <MyMusic />}
          {hasBackTracks && <BackTracks />}
          {hasLikedMusic && <LikedMusic />}
          {hasMyClips && <MyClips />}
          {hasPlaylists && <MyPlaylist />}
          {hasLikedPlayback && <LikedPlayback />}
          {hasLikedClips && <LikedClips />}

          {!hasAnySection && (
            <View
              style={{
                flex: 1,
                alignItems: 'center',
                justifyContent: 'center',
                paddingTop: 40,
              }}>
              <Text
                style={{
                  fontSize: 16,
                  color: Palette.white,
                  opacity: 0.8,
                  fontFamily: FONT_FAMILY.InterRegular,
                  textAlign: 'center',
                }}>
                Rien n'est disponible encore ici
              </Text>
            </View>
          )}
        </ScrollView>
      </View>
    </Page>
  );
};

export default Library;
