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

const STREAM_PRICES = [
  {
    title: "Je diffuse ma chanson",
    description: "Ce morceau uniquement",
    price: "1,99€ / mois",
  },
  {
    title: "Je diffuse 3 chansons",
    description: "Ce morceau et les 2 prochains que tu crées",
    price: "3,99€ / mois",
  },
  {
    title: "Illimité",
    price: "14,99€ / mois",
    recommended: true,
  },
];

const PLAYBACK_STREAM_PRICES = [
  {
    title: "Je créer et diffuse mon Playback",
    description: "Ce morceau uniquement",
    price: "6,99€ / mois",
  },
  {
    title: "3 Playbacks",
    description: "Ce morceau et les 2 prochains que tu crées",
    price: "12,99€ / mois",
  },
  {
    title: "Illimité",
    price: "20€ / mois",
    recommended: true,
  },
];

const StreamSong = () => {
  const params = useRoute().params;
  const action = params?.action;
  const [selectedIndex, setSelectedIndex] = useState(null);

  const DATA = action === "playback" ? PLAYBACK_STREAM_PRICES : STREAM_PRICES;

  return (
    <Page
      backgroundImg={
        action === "playback"
          ? background.playbackBG2
          : background.productionBG2
      }
      headerType="NONE"
    >
      <MusicLandHeader onPressBack={goBack} progress={75} />
      <View style={{ flex: 1, paddingTop: responsiveHeight(5) }}>
        <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 }}>
            <View style={{ gap: 2, marginTop: 12 }}>
              <Text
                style={{
                  fontSize: 22,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterSemiBold,
                  textAlign: "center",
                }}
              >
                Diffuser ta chanson{"\n"}
                Tarifs
              </Text>
              <Text
                style={{
                  fontSize: 16,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterMedium,
                  textAlign: "center",
                }}
              >
                Si tu désires diffuser ta chanson ou tes chansons sur la
                plateforme de MusicLand et participer au concours et être dans
                le top 3 voici le tarif.
              </Text>
            </View>
            <View style={{ gap: 10 }}>
              {DATA.map((item, index) => (
                <CreateLyricsHeader
                  key={index}
                  colors={
                    selectedIndex === index
                      ? ["#F94697", "#7023F7"]
                      : [Palette.tran, Palette.tran]
                  }
                  tint={!item.recommended ? "dark" : "light"}
                  onPress={() => {
                    setSelectedIndex(index);
                    navigate(Routes.SongRelease, {
                      action,
                    });
                  }}
                >
                  <View style={{ paddingTop: 5 }}>
                    <Text
                      style={{
                        fontSize: 16,
                        color: Palette.white,
                        fontFamily: FONT_FAMILY.HelveticaNeueBold,
                      }}
                    >
                      {item.title}
                    </Text>
                    {item.description && (
                      <Text
                        style={{
                          fontSize: 12,
                          color: Palette.white,
                          fontFamily: FONT_FAMILY.InterRegular,
                        }}
                      >
                        {item.description}
                      </Text>
                    )}
                  </View>
                  <View style={{ alignSelf: "flex-end", marginTop: 5 }}>
                    <Text
                      style={{
                        fontSize: 12,
                        color: Palette.white,
                        fontFamily: FONT_FAMILY.InterRegular,
                      }}
                    >
                      {item.price}
                    </Text>
                  </View>
                  {item.recommended && (
                    <View
                      style={{
                        paddingHorizontal: 10,
                        height: 26,
                        ...Style.containerCenter,
                        borderRadius: 100,
                        position: "absolute",
                        backgroundColor: "#FFFFFF33",
                        bottom: 8,
                        left: 10,
                      }}
                    >
                      <Text
                        style={{
                          fontSize: 14,
                          color: Palette.white,
                          fontFamily: FONT_FAMILY.HelveticaNeueRegular,
                          bottom: -1,
                        }}
                      >
                        Recommandé
                      </Text>
                    </View>
                  )}
                </CreateLyricsHeader>
              ))}
            </View>
          </View>
        </CreateLyricsHeader>
      </View>
    </Page>
  );
};

export default StreamSong;