import React, { useState } from "react";
import { FlatList, Image, Pressable, Text, View } from "react-native";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { background, icons } from "../../assets";
import BorderGradientButton from "../../components/BorderGradientButton";
import { projectsRef } from "../../config/firebase";
import useDataFromRef from "../../hooks/useDataFromRef";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { navigate } from "../../navigation/NavigationService";
import { Palette, Style } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import PlaybacksCard from "./components/PlaybacksCard";
import SongCard from "./components/SongCard";

const HitParade = () => {
  const [selected, setSelected] = useState("Chansons");
  const { data: topSongs } = useDataFromRef({
    ref: projectsRef.where("views", ">", 0).orderBy("views", "desc").limit(10),
    simpleRef: false,
    listener: true,
    condition: true,
  });

  return (
    <Page backgroundImg={background.hitParadeBG} headerType="NONE">
      <View style={{ gap: 12, flex: 1 }}>
        <Image source={icons.musicLandLogo} style={{ alignSelf: "center" }} />
        <View style={{ flex: 1, gap: 24 }}>
          <View style={{ gap: 11 }}>
            <Pressable style={{ position: "absolute", right: 8, top: 20 }}>
              <Image source={icons.calendar} />
            </Pressable>
            <Image
              source={icons.hitParadeLogo}
              style={{ alignSelf: "center" }}
            />
            <CreateLyricsHeader
              gradientProps={{
                colors: ["#F94697", "#7023F7"],
              }}
            >
              <Text
                style={{
                  fontSize: 16,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.HelveticaNeueBold,
                }}
              >
                Coups de coeur des utilisateurs catégorie Playbacks
              </Text>
              <Text
                style={{
                  fontSize: 12,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterRegular,
                }}
              >
                Les 3 Playbacks les plus likées du mois reçoivent des{"\n"}
                tokens.
              </Text>
            </CreateLyricsHeader>
          </View>
          <View
            style={{
              ...Style.containerRow,
              justifyContent: "space-between",
            }}
          >
            {["Chansons", "Playbacks", "Clips"].map((item, index) => (
              <BorderGradientButton
                key={index}
                title={item}
                onPress={() => setSelected(item)}
                tint={selected === item ? "light" : "dark"}
                containerStyle={{
                  width: 100,
                }}
                titleStyle={{
                  fontSize: 16,
                  fontFamily: FONT_FAMILY.HelveticaNeueBold,
                }}
              />
            ))}
          </View>
          {selected === "Chansons" && (
            <FlatList
              contentContainerStyle={{
                gap: 10,
                paddingBottom: responsiveHeight(20),
              }}
              data={Array.isArray(topSongs) ? topSongs : []}
              keyExtractor={(item) => item.id}
              renderItem={({ item, index }) => (
                <SongCard
                  rank={index + 1}
                  title={item?.title || "Sans titre"}
                  artist={"MusicLand"}
                  coverUrl={item?.coverUrl || null}
                  onPress={() =>
                    navigate(Routes.MusicDetails, { projectId: item.id })
                  }
                />
              )}
            />
          )}
          {selected === "Playbacks" && (
            <FlatList
              contentContainerStyle={{
                gap: 10,
                paddingBottom: responsiveHeight(20),
              }}
              data={Array.from({ length: 5 })}
              renderItem={() => <PlaybacksCard />}
            />
          )}
          {selected === "Clips" && (
            <FlatList
              contentContainerStyle={{
                gap: 10,
                paddingBottom: responsiveHeight(20),
              }}
              data={Array.from({ length: 5 })}
              renderItem={() => <PlaybacksCard />}
            />
          )}
        </View>
      </View>
    </Page>
  );
};

export default HitParade;