import { View, Text, FlatList, Image, Pressable } from "react-native";
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";

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

  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.from({ length: 9 })}
            numColumns={3}
            columnWrapperStyle={{ gap: 10 }}
            contentContainerStyle={{ gap: 14 }}
            renderItem={() => (
              <Pressable
                style={{ flex: 1, gap: 4 }}
                onPress={() => console.log("PRESSED")}
              >
                <Image
                  source={img.placeholder2}
                  style={{ width: "100%", height: 114, borderRadius: 8 }}
                />
                <Text
                  style={{
                    fontSize: 12,
                    color: Palette.white,
                    fontFamily: FONT_FAMILY.InterRegular,
                  }}
                >
                  Voiture
                </Text>
              </Pressable>
            )}
          />
        </CreateLyricsHeader>
      </View>
    </Page>
  );
};

export default AllMyMusic;
