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

const HitParade = () => {
  const [selected, setSelected] = useState("Chansons");

  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.from({ length: 5 })}
              renderItem={() => <SongCard />}
            />
          )}
          {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;