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