import { View, Image, ScrollView, Pressable } 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";

const Library = () => {
  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),
          }}
          showsVerticalScrollIndicator={false}
        >
          <MyMusic />
          <BackTracks />
          <LikedMusic />
          {/*<MyClips />*/}
          <MyPlaylist />
          <LikedPlayback />
          {/*<LikedClips />*/}
        </ScrollView>
      </View>
    </Page>
  );
};

export default Library;
