import {
  View,
  Text,
  StyleSheet,
  Pressable,
  ScrollView,
  Image,
} from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, img } from "../../assets";
import { gutters, Palette, Style } from "../../styles";
import SearchBar from "../../components/SearchBar";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import { BlurView } from "expo-blur";
import ResearchHeader from "./components/ResearchHeader";
import MusicCard from "./components/MusicCard";
import { size } from "../../styles/Style";
import { navigate } from "../../navigation/NavigationService";
import { Routes } from "../../navigation";

const Research = () => {
  const [selected, setSelected] = useState(null);

  const onPressMenu = (item) => {
    if (selected === item) {
      setSelected(null);
    } else {
      setSelected(item);
    }
  };

  return (
    <Page
      headerType="NAVIGATION"
      backgroundImg={background.libraryBG2}
      title="Recherche"
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
    >
      <View style={{ flex: 1, gap: 10 }}>
        <ResearchHeader
          onPress={(item) => onPressMenu(item)}
          selected={selected}
        />
        <View style={{ flex: 1 }}>
          <ScrollView contentContainerStyle={{ paddingTop: 2 }}>
            {(!selected || selected === "Musiques") && (
              <View style={{ paddingHorizontal: 2 }}>
                <CreateLyricsHeader
                  gradientProps={{
                    start: { x: 0, y: 0 },
                    end: { x: 0, y: 1 },
                  }}
                >
                  <View style={{ gap: 10 }}>
                    {Array.from({ length: 3 }).map((_, index) => (
                      <MusicCard
                        key={index}
                        onPress={() => navigate(Routes.MusicDetails)}
                      />
                    ))}
                  </View>
                </CreateLyricsHeader>
              </View>
            )}
            {(!selected || selected === "Clips") && (
              <View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
                <CreateLyricsHeader
                  gradientProps={{
                    start: { x: 0, y: 0 },
                    end: { x: 0, y: 1 },
                  }}
                >
                  <View style={{ gap: 6, ...Style.containerRow }}>
                    {Array.from({ length: 3 }).map((_, index) => (
                      <View style={{ flex: 1, gap: 6 }} key={index}>
                        <Image
                          source={img.placeholder3}
                          style={{
                            width: "100%",
                            height: 147,
                            borderRadius: 10,
                          }}
                        />
                        <Text
                          style={{
                            fontSize: 12,
                            color: Palette.white,
                            fontFamily: FONT_FAMILY.InterRegular,
                          }}
                        >
                          Pour Lili
                        </Text>
                      </View>
                    ))}
                  </View>
                </CreateLyricsHeader>
              </View>
            )}
            {(!selected || selected === "Profils") && (
              <View style={{ paddingHorizontal: 2, paddingTop: 10 }}>
                <CreateLyricsHeader
                  gradientProps={{
                    start: { x: 0, y: 0 },
                    end: { x: 0, y: 1 },
                  }}
                >
                  <View style={{ gap: 8 }}>
                    {Array.from({ length: 2 }).map((_, index) => (
                      <Pressable
                        style={{ gap: 14, ...Style.containerRow }}
                        key={index}
                        onPress={() => navigate(Routes.SingerProfile)}
                      >
                        <Image
                          source={img.profile}
                          style={{ ...size({ size: 60 }), borderRadius: 100 }}
                        />
                        <Text
                          style={{
                            fontSize: 12,
                            color: Palette.white,
                            fontFamily: FONT_FAMILY.InterRegular,
                          }}
                        >
                          ReggaetonLil
                        </Text>
                      </Pressable>
                    ))}
                  </View>
                </CreateLyricsHeader>
              </View>
            )}
          </ScrollView>
        </View>
      </View>
    </Page>
  );
};

export default Research;
