import { BlurView } from "expo-blur";
import React from "react";
import {
  Image,
  Platform,
  Pressable,
  StyleSheet,
  Text,
  View,
} from "react-native";
import useMinuit from "react-native-minuit/src/hooks/useMinuit.js";
import { responsiveHeight } from "react-native-responsive-dimensions";
import { background, img } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { projectsRef, serverTimestamp } from "../../config/firebase";
import { uploadFileToFirebase } from "../../helpers/uploadToFirebase";
import Page from "../../layouts/Page";
import { Routes } from "../../navigation";
import { goBack, navigate } from "../../navigation/NavigationService";
import { Palette } from "../../styles";
import { FONT_FAMILY } from "../../styles/Fonts";

import { size } from "../../styles/Style";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
const DownloadSongs = ({ route }) => {
  // const params = useRoute().params;
  const { action, uri, project } = route.params || {};
  console.log("project id", project?.id);
  const { setIsLoading, setTooltip } = useMinuit();

  const handleDownloadUri = async () => {
    if (action === "playback" && project?.id) {
      // Publication du playback
      console.log("project id : ", project.id);
      try {
        setIsLoading(true);
        const { resultURI = null } = await uploadFileToFirebase({
          uri: uri,
          path: `musics/${project.id}/playback.mp4`,
          shouldCompress: true,
          fileType: "VIDEO",
        });

        if (!resultURI) throw new Error("Téléversement de l'image impossible");

        if (resultURI) {
          await projectsRef.doc(project.id).set(
            {
              playbackUrl: resultURI,
              updatedAt: serverTimestamp(),
            },
            { merge: true }
          );
          setTooltip({
            type: "success",
            text: "Playback publié avec succès",
          });
        } else {
          setTooltip({
            type: "error",
            text: "Erreur lors de la publication du playback",
          });
        }
      } catch (error) {
        console.log("error upload playback", error);
        setTooltip({
          type: "error",
          text: "Erreur lors de la publication du playback",
        });
      } finally {
        setIsLoading(false);
      }
      // Handle playback download
    } else {
      // Handle song download
    }
  };
  return (
    <Page
      backgroundImg={
        action === "playback"
          ? background.playbackBG2
          : background.productionBG2
      }
      headerType="NONE"
    >
      <MusicLandHeader onPressBack={goBack} progress={50} />
      <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: 12, paddingVertical: 12 }}>
            <Text style={styles.title}>
              Prêt à télécharger{" "}
              {action === "playback" ? "ton  Playback" : "ta chanson"} ?
            </Text>
            <View style={{ gap: 10 }}>
              <Pressable
                style={styles.itemContainer}
                onPress={
                  () => {
                    console.log("test");
                    handleDownloadUri();
                  }

                  // navigate(Routes.DownloadPrices, {
                  //   action,
                  //   uri,
                  // })
                }
              >
                <BlurView
                  style={styles.blurView}
                  intensity={40}
                  tint="dark"
                  experimentalBlurMethod={
                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                  }
                >
                  <Text style={styles.label}>
                    Télécharger{" "}
                    {action === "playback" ? "mon Playback" : "ma chanson"}
                  </Text>
                  <Text style={styles.description}>Pour moi uniquement</Text>
                </BlurView>
              </Pressable>
              <Pressable
                style={styles.itemContainer}
                onPress={() =>
                  navigate(Routes.StreamSong, {
                    action,
                  })
                }
              >
                <BlurView
                  style={styles.blurView}
                  intensity={40}
                  tint="dark"
                  experimentalBlurMethod={
                    Platform.OS !== "ios" ? "dimezisBlurView" : "none"
                  }
                >
                  <Text style={styles.label}>
                    Diffuser{" "}
                    {action === "playback" ? "mon Playback" : "ma chanson"} sur
                    la plateforme de MusicLand (+ réseaux sociaux) et participer
                    au concours
                  </Text>
                  <Text style={styles.description}>
                    Top 3: 1er 15% du CA ML - 2ème 10% du CA ML - 3ème 5% du CA
                    ML (catégorie{" "}
                    {action === "playback" ? "Playback" : "chanson"})
                  </Text>
                </BlurView>
              </Pressable>
            </View>
          </View>
        </CreateLyricsHeader>
      </View>
    </Page>
  );
};

export default DownloadSongs;

const styles = StyleSheet.create({
  title: {
    fontSize: 22,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterSemiBold,
  },
  label: {
    fontSize: 16,
    color: Palette.white,
    fontFamily: FONT_FAMILY.HelveticaNeueBold,
  },
  description: {
    fontSize: 12,
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterRegular,
  },
  blurView: {
    paddingHorizontal: 10,
    paddingBottom: 8,
    paddingTop: 10,
  },
  itemContainer: {
    borderRadius: 12,
    overflow: "hidden",
    backgroundColor: "#FFFFFF03",
    shadowColor: "#0000001A",
    shadowOffset: {
      width: 0,
      height: 2,
    },
    shadowOpacity: 0.25,
    shadowRadius: 3.84,

    elevation: 5,
  },
});