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

const SongDownloaded = () => {
  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'} téléchargée !
            </Text>
            <Text
              style={{
                fontSize: 16,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterMedium,
              }}>
              {action === 'playback' ? 'Ton Playback' : 'Ta Chanson'} est
              désormais téléchargée dans tes fichiers. 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.BottomTab)}
            />
          </View>
        </CreateLyricsHeader>
      </View>
    </Page>
  );
};

export default SongDownloaded;