import { View, Text, Image } from 'react-native'
import React, { useCallback, useEffect, useState } from 'react'
import AppCheckbox from '../../components/AppCheckbox'
import Page from '../../layouts/Page'
import MusicLandHeader from '../../components/MusicLandHeader'
import GradientButton from '../../components/GradientButton'
import { background, img } from '../../assets'
import { goBack, navigate } from '../../navigation/NavigationService'
import useMinuit from 'react-native-minuit/src/hooks/useMinuit.js'
import CreateLyricsHeader from '../Writing/components/CreateLyricsHeader'
import { responsiveHeight } from 'react-native-responsive-dimensions'
import { size } from '../../styles/Style'
import { Palette } from '../../styles'
import { FONT_FAMILY } from '../../styles/Fonts'
import { Routes } from '../../navigation'
import { useRoute } from '@react-navigation/native'
import { useUser } from '../../providers/UserDataProvider'

const StreamSong = () => {
  const params = useRoute().params
  const action = params?.action
  const project = params?.project || null
  const { hasActiveSubscription } = useUser() || {}
  const userHasActiveSubscription = hasActiveSubscription
  const { setTooltip } = useMinuit()
  const [hasAcceptedPublication, setHasAcceptedPublication] = useState(true)

  useEffect(() => {
    if (action && action !== 'playback') {
      navigate(Routes.SongDownload, { project })
    }
  }, [action, project])

  const headingText = 'Publier ton playback'
  const descriptionText = userHasActiveSubscription
    ? 'Ton abonnement est actif, publie ton playback et participe au concours.'
    : 'Pour publier ton playback sur la plateforme, rejoins le Club MusicLand.'
  const ctaLabel = userHasActiveSubscription
    ? 'Publier mon playback'
    : 'Rejoindre le Club MusicLand'
  const handlePrimaryAction = useCallback(() => {
    if (!hasAcceptedPublication) {
      setTooltip({
        type: 'error',
        text: 'Confirme la diffusion sur Musicland et YouTube avant de publier',
      })
      return
    }
    if (userHasActiveSubscription) {
      if (action === 'playback') {
        setTooltip({
          type: 'success',
          text: 'Playback publié !',
        })
        navigate(Routes.Home)
        return
      }
      navigate(Routes.SongRelease, { action })
      return
    }
    navigate(Routes.Payments)
  }, [action, hasAcceptedPublication, setTooltip, userHasActiveSubscription])

  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',
                }}
              >
                {headingText}
              </Text>
              <Text
                style={{
                  fontSize: 16,
                  color: Palette.white,
                  fontFamily: FONT_FAMILY.InterMedium,
                  textAlign: 'center',
                }}
              >
                {descriptionText}
              </Text>
            </View>
          </View>
        </CreateLyricsHeader>
        <View style={{ marginTop: 24, gap: 12 }}>
          <View style={{ gap: 6 }}>
            <AppCheckbox
              selected={hasAcceptedPublication}
              onPress={() => setHasAcceptedPublication((prevState) => !prevState)}
              label="J'accepte la diffusion de mon contenu sur Musicland et YouTube."
            />
            <Text
              style={{
                fontSize: 13,
                fontFamily: FONT_FAMILY.InterRegular,
                color: Palette.white,
                opacity: 0.8,
              }}
            >
              Cette confirmation est requise avant toute mise en ligne.
            </Text>
          </View>
          <GradientButton
            title={ctaLabel}
            onPress={handlePrimaryAction}
            containerStyle={{
              width: '100%',
              maxWidth: 320,
              alignSelf: 'center',
            }}
          />
          {!userHasActiveSubscription && (
            <Text
              style={{
                fontSize: 14,
                color: Palette.white,
                fontFamily: FONT_FAMILY.InterRegular,
                textAlign: 'center',
                opacity: 0.8,
              }}
            >
              Rejoins le club pour débloquer la publication de tes créations et tenter de grimper
              dans le classement.
            </Text>
          )}
        </View>
      </View>
    </Page>
  )
}

export default StreamSong