import {
  View,
  Text,
  Pressable,
  Image,
  StyleSheet,
  FlatList,
} from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, icons, img } from "../../assets";
import { gutters, Palette } from "../../styles";
import { BlurView } from "expo-blur";
import Style, { size } from "../../styles/Style";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { FONT_FAMILY } from "../../styles/Fonts";
import GradientButton from "../../components/GradientButton";
import BorderGradient from "../../components/BorderGradient/BorderGradient";
import MusicCard from "../Library/components/MusicCard";

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

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

  return (
    <Page
      backgroundImg={background.profileBG}
      headerType="NAVIGATE"
      contentContainerStyle={{
        paddingBottom: gutters * 2,
      }}
      containerStyle={{
        backgroundColor: "#0000004D",
      }}
      rightComponent={() => (
        <Pressable>
          <Image source={icons.more} />
        </Pressable>
      )}
    >
      <View style={{ flex: 1, marginTop: responsiveHeight(2), gap: 20 }}>
        <View style={{ borderRadius: 20, overflow: "hidden" }}>
          <BlurView
            intensity={20}
            style={{
              paddingVertical: 14,
              backgroundColor: Palette.glass,
              paddingHorizontal: 20,
            }}
          >
            <View style={{ alignItems: "center" }}>
              <Image
                source={img.profile}
                style={{
                  ...size({ size: 108 }),
                  borderRadius: 100,
                }}
              />
              <Text
                style={{
                  fontSize: 22,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterSemiBold,
                }}
              >
                elia.mrn
              </Text>
            </View>
            <View style={{ ...Style.containerRow, gap: 10, marginTop: 10 }}>
              <View style={{ flex: 1, alignItems: "center" }}>
                <Text style={styles.value}>0</Text>
                <Text style={styles.label}>playbacks</Text>
              </View>
              <View style={{ flex: 1, alignItems: "center" }}>
                <Text style={styles.value}>880</Text>
                <Text style={styles.label}>abonnés</Text>
              </View>
              <View style={{ flex: 1, alignItems: "center" }}>
                <Text style={styles.value}>6</Text>
                <Text style={styles.label}>abonnements</Text>
              </View>
            </View>
            <GradientButton
              title="Suivre"
              containerStyle={{
                width: "80%",
                alignSelf: "center",
                marginTop: 18,
              }}
            />
          </BlurView>
        </View>
        <View
          style={{
            ...Style.containerRow,
            gap: 6,
          }}
        >
          {["Playbacks", "Clips", "Chansons"].map((item, index) => (
            <Pressable
              key={index}
              onPress={() => onPressMenu(item)}
              style={{ flex: 1 }}
            >
              <BorderGradient
                gradientProps={{
                  colors:
                    selected === item
                      ? ["#FFFFFF00", "#FFFFFF"]
                      : [Palette.tran, Palette.tran],
                  locations: [0, 1],
                  start: { x: 0, y: 0 },
                  end: { x: 1, y: 0 },
                }}
                style={styles.borderGradient}
              />
              <View style={styles.blurContainer}>
                <BlurView intensity={20} style={styles.blurView}>
                  <Text style={styles.menu}>{item}</Text>
                </BlurView>
              </View>
            </Pressable>
          ))}
        </View>
        {selected === "Playbacks" && (
          <View style={{ flex: 1 }}>
            <FlatList
              data={Array.from({ length: 6 })}
              numColumns={3}
              contentContainerStyle={{ gap: 14 }}
              columnWrapperStyle={{ gap: 10 }}
              renderItem={() => (
                <View style={{ flex: 1, gap: 6 }}>
                  <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>
        )}
        {selected === "Chansons" && (
          <View style={{ flex: 1 }}>
            <FlatList
              data={Array.from({ length: 3 })}
              contentContainerStyle={{
                gap: 10,
              }}
              renderItem={() => <MusicCard />}
            />
          </View>
        )}
      </View>
    </Page>
  );
};

export default SingerProfile;

const styles = StyleSheet.create({
  value: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  label: {
    fontSize: 12,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  menu: {
    fontSize: 12,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  borderGradient: {
    borderWidth: 1,
    borderRadius: 10,
    height: 33,
    position: "absolute",
    zIndex: 1,
    width: "100%",
  },
  blurContainer: {
    height: 33,
    zIndex: -1,
    borderRadius: 10,
    overflow: "hidden",
    backgroundColor: Palette.glass,
  },
  blurView: {
    width: "100%",
    height: "100%",
    paddingHorizontal: 10,
    ...Style.containerCenter,
  },
});
