import { View, Text, Image } from "react-native";
import React from "react";
import MusicLandHeader from "../../components/MusicLandHeader";
import Page from "../../layouts/Page";
import { background, img } from "../../assets";
import { goBack, navigate } from "../../navigation/NavigationService";
import { responsiveHeight } from "react-native-responsive-dimensions";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
import { size } from "../../styles/Style";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";
import BorderGradientButton from "../../components/BorderGradientButton";
import GradientButton from "../../components/GradientButton";
import { Routes } from "../../navigation";
import { useRoute } from "@react-navigation/native";

const SongRelease = () => {
  const params = useRoute().params;
  const action = params?.action;

  return (
    <Page
      backgroundImg={
        action === "playback"
          ? background.playbackBG2
          : background.productionBG2
      }
      headerType="NONE"
    >
      <MusicLandHeader onPressBack={goBack} progress={100} />
      <View style={{ flex: 1, paddingTop: responsiveHeight(15) }}>
        <CreateLyricsHeader
          gradientProps={{
            start: { x: 0, y: 0 },
            end: { x: 0, y: 1 },
          }}
        >
          <Image
            source={img.placeholder2}
            style={{
              ...size({ size: 158 }),
              borderRadius: 13,
              alignSelf: "center",
            }}
          />
          <View style={{ gap: 2, marginTop: 12 }}>
            <Text
              style={{
                fontSize: 22,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterSemiBold,
                textAlign: "center",
              }}
            >
              {action === "playback" ? "Playback" : "Chanson"} publiée !
            </Text>
            <Text
              style={{
                fontSize: 16,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterMedium,
              }}
            >
              {action === "playback" ? "Ton Playback" : "Ta Chanson"} est
              désormais accessible sur l’application et les réseaux sociaux de
              MusicLand. N’hésite pas à la partager avec tes proches.
            </Text>
          </View>
          <View
            style={{
              marginTop: 26,
              gap: 12,
              paddingBottom: 12,
              width: "80%",
              alignSelf: "center",
            }}
          >
            <BorderGradientButton
              title="Partager"
              onPress={() => navigate(Routes.Production)}
            />
            <GradientButton
              title="Page d'accueil"
              onPress={() => navigate(Routes.Production)}
            />
          </View>
        </CreateLyricsHeader>
      </View>
    </Page>
  );
};

export default SongRelease;