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

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", height: 150, resizeMode: "contain" }}
        />
        <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}
        >
          <BlurView
            intensity={20}
            experimentalBlurMethod="dimezisBlurView"
            style={{ borderRadius: 12, padding: 12, overflow: "hidden" }}
          >
            <MyMusic />
          </BlurView>
          {hasBackTracks && <BackTracks />}
          {hasLikedMusic && <LikedMusic />}
          {hasMyClips && <MyClips />}
          <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;