import {
  View,
  Text,
  ScrollView,
  Image,
  Pressable,
  StyleSheet,
} from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, icons, img } from "../../assets";
import { Palette } from "../../styles";
import Style, { gutters, size } from "../../styles/Style";
import { FONT_FAMILY } from "../../styles/Fonts";
import Slider from "../../components/Slider";
import { useRoute } from "@react-navigation/core";
import { SheetManager } from "react-native-actions-sheet";

const MusicDetails = () => {
  const params = useRoute().params;
  const action = params?.action;
  const [fav, setFav] = useState(false);

  return (
    <Page
      headerType="NAVIGATION"
      title={action === "userProfile" ? "Mon profil" : "Recherche"}
      backgroundImg={
        action === "userProfile" ? background.profileBG : background.libraryBG2
      }
      {...(action === "userProfile" && {
        containerStyle: {
          backgroundColor: "#0000004D",
        },
        rightComponent: () => (
          <Pressable onPress={() => SheetManager.show("DeleteAudio")}>
            <Image source={icons.trash} />
          </Pressable>
        ),
      })}
    >
      <ScrollView
        contentContainerStyle={{
          flexGrow: 1,
          paddingTop: 20,
          paddingBottom: gutters * 2,
        }}
        // stickyHeaderIndices={[1]}
      >
        <View style={{ gap: 28 }}>
          <Image source={img.placeholder4} style={styles.img} />
          <View style={{ ...Style.containerSpaceBetween }}>
            <View>
              <Text style={styles.title}>Lust for Life</Text>
              <Text style={styles.name}>Lana del Rey</Text>
            </View>
            <View style={{ ...Style.containerRow, gap: 12 }}>
              <Pressable onPress={() => setFav(!fav)}>
                <Image
                  source={fav ? icons.heart : icons.heartOutline}
                  style={{ ...size({ size: 24 }) }}
                  resizeMode="contain"
                />
              </Pressable>
              <Pressable onPress={() => SheetManager.show("Playlist")}>
                <Image
                  source={icons.check}
                  style={{ ...size({ size: 24 }) }}
                  resizeMode="contain"
                />
              </Pressable>
            </View>
          </View>
        </View>
        <View style={{ paddingTop: 22 }}>
          <Slider value={"0:00"} maxValue={"2:00"} />
          <View style={{ ...Style.containerRow, gap: 24, alignSelf: "center" }}>
            <Pressable>
              <Image source={icons.forward} />
            </Pressable>
            <Pressable>
              <Image source={icons.pause} />
            </Pressable>
            <Pressable>
              <Image
                source={icons.forward}
                style={{ transform: [{ rotate: "180deg" }] }}
              />
            </Pressable>
          </View>
        </View>
        <View style={{ marginTop: 30, gap: 20 }}>
          <Text
            style={{
              fontSize: 14,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterRegular,
            }}
          >
            Description chanson. Viverra enim risus enim enim placerat. Integer
            pulvinar tristique suscipit risus. Id hendrerit in odio phasellus
            interdum lectus amet
          </Text>
          <Text
            style={{
              fontSize: 16,
              color: Palette.white,
              fontFamily: FONT_FAMILY.InterRegular,
            }}
          >
            Allô{"\n"}Écoute maman est près de toi{"\n"}Il faut lui dire "maman,
            c'est quelqu'un pour toi"{"\n"}Ah, c'est le monsieur de la dernière
            fois{"\n"}Bon, je vais la chercher{"\n"}Je crois qu'elle est dans
            son bain{"\n"}Et je sais pas si elle va pouvoir venir
          </Text>
        </View>
      </ScrollView>
    </Page>
  );
};

export default MusicDetails;

const styles = StyleSheet.create({
  img: {
    width: 292,
    height: 290,
    borderRadius: 24,
    alignSelf: "center",
  },
  title: {
    fontSize: 20,
    color: Palette.white,
    fontFamily: FONT_FAMILY.HelveticaNeueMedium,
  },
  name: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.HelveticaNeueRegular,
  },
});