import { View, Text, FlatList, Pressable, Image as RNImage } from "react-native";
import { Image as ExpoImage } from "expo-image";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, img } from "../../assets";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { gutters, Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import useLayoutType from "../../hooks/useLayoutType";
import { useUser } from "../../providers/UserDataProvider";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";

const AllMyMusic = () => {
  const [containerLayout, setContainerLayout] = useState(null);
  const { isWeb } = useLayoutType();
  const { userProjects: projects } = useUser();

  return (
    <Page
      backgroundImg={background.libraryBG}
      headerType="NAVIGATION"
      title="Mes musiques"
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
    >
      <View
        style={{ flex: 1 }}
        onLayout={(e) => setContainerLayout(e.nativeEvent.layout)}
      >
        <CreateLyricsHeader
          containerStyle={{
            maxHeight: containerLayout?.height,
            zIndex: 1,
          }}
          blurViewStyle={{
            zIndex: 2,
            ...(isWeb && { flex: 1 }),
          }}
          gradientProps={{
            start: { x: 0, y: 0 },
            end: { x: 0, y: 1 },
          }}
        >
          <FlatList
            data={Array.isArray(projects) ? projects : []}
            numColumns={3}
            columnWrapperStyle={{ gap: 10 }}
            contentContainerStyle={{ gap: 14 }}
            keyExtractor={(item) => item.id}
            // Projects are provided by provider with a live listener
          renderItem={({ item }) => (
              <Pressable
                style={{ flex: 1, gap: 4 }}
                onPress={() =>
                  navigate(Routes.MusicDetails, { projectId: item.id })
                }
              >
                {item?.coverUrl ? (
                  <ExpoImage
                    source={{ uri: item.coverUrl }}
                    cachePolicy="memory-disk"
                    priority="high"
                    contentFit="cover"
                    transition={100}
                    style={{ width: "100%", height: 114, borderRadius: 8 }}
                  />
                ) : (
                  <RNImage
                    source={img.placeholder2}
                    style={{ width: "100%", height: 114, borderRadius: 8 }}
                  />
                )}
                <Text
                  style={{
                    fontSize: 12,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  {item?.title || "Sans titre"}
                </Text>
              </Pressable>
            )}
          />
        </CreateLyricsHeader>
      </View>
    </Page>
  );
};

export default AllMyMusic;
