import { View, Text, Image } from "react-native";
import React, { useState } from "react";
import Page from "../../layouts/Page";
import { background, img } from "../../assets";
import MusicLandHeader from "../../components/MusicLandHeader";
import { goBack, navigate } from "../../navigation/NavigationService";
import { responsiveHeight } from "react-native-responsive-dimensions";
import CreateLyricsHeader from "../Writing/components/CreateLyricsHeader";
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 DownloadPrices = () => {
  const params = useRoute().params;
  const action = params?.action;
  const [selectedIndex, setSelectedIndex] = useState(null);

  const PRICES = [
    {
      title: action === "playback" ? "1 Playback" : "Je télécharge ma chanson",
      description: `Ce ${
        action === "playback" ? "Playback" : "morceau"
      } uniquement`,
      price: "6,99€",
    },
    {
      title: `3 ${action === "playback" ? "Playbacks" : "chansons"}`,
      description: `Ce ${
        action === "playback" ? "Playback" : "morceau"
      } et les 2 prochains que tu crées`,
      price: "12,99€",
    },
    {
      title: `5 ${action === "playback" ? "Playbacks" : "chansons"}`,
      description: `Ce ${
        action === "playback" ? "Playback" : "morceau"
      } et les 4 prochains que tu crées`,
      price: "19,99€",
      recommended: true,
    },
  ];

  return (
    <Page
      backgroundImg={
        action === "playback"
          ? background.playbackBG2
          : background.productionBG2
      }
      headerType="NONE"
    >
      <MusicLandHeader onPressBack={goBack} progress={75} />
      <View style={{ flex: 1, paddingTop: responsiveHeight(10) }}>
        <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, marginTop: 10 }}>
            <Text
              style={{
                fontSize: 22,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterSemiBold,
                textAlign: "center",
              }}
            >
              Tarifs
            </Text>
            <View style={{ gap: 10 }}>
              {PRICES.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.SongDownloaded, {
                      action,
                    });
                  }}
                >
                  <View style={{ paddingTop: 5 }}>
                    <Text
                      style={{
                        fontSize: 16,
                        color: Palette.white,
                        fontFamily: FONT_FAMILY.HelveticaNeueBold,
                      }}
                    >
                      {item.title}
                    </Text>
                    <Text
                      style={{
                        fontSize: 12,
                        color: Palette.white,
                        fontFamily: FONT_FAMILY.InterRegular,
                      }}
                    >
                      {item.description}
                    </Text>
                  </View>
                  <View style={{ alignSelf: "flex-end", marginTop: 14 }}>
                    <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 DownloadPrices;