import React, { useCallback, useState } from 'react'
import { StyleSheet, Text, View } from 'react-native'
import { useGlobal } from 'reactn'
import { background } from '../assets'
import BorderGradientButton from '../components/BorderGradientButton'
import GradientButton from '../components/GradientButton'
import ItemContainer from '../components/ItemContainer/ItemContainer'
import { isWeb } from '../hooks/useLayoutType'
import Page from '../layouts/Page'
import { Routes } from '../navigation'
import { navigate, reset } from '../navigation/NavigationService'
import { Palette } from '../styles'
import { FONT_FAMILY } from '../styles/Fonts'
import {
  completeRegistrationFlow,
  getExperienceReset,
  isGlobalListeningLaunchPeriodActive,
} from '../utils/registrationFlow'

const RegistrationChoice = () => {
  const [loadingChoice, setLoadingChoice] = useState(null)
  const [, setTooltip] = useGlobal('_tooltip')

  const openPayment = useCallback((experience) => {
    navigate(Routes.Payments, {
      registrationFlow: true,
      registrationChoice: experience,
    })
  }, [])

  const handleListen = useCallback(async () => {
    if (!isGlobalListeningLaunchPeriodActive()) {
      openPayment('listen')
      return
    }

    try {
      setLoadingChoice('listen')
      await completeRegistrationFlow('listen')
      reset(getExperienceReset('listen'))
    } catch (error) {
      setTooltip({
        type: 'error',
        text: error?.message || 'Impossible d’ouvrir l’espace Écoute',
      })
    } finally {
      setLoadingChoice(null)
    }
  }, [openPayment, setTooltip])

  const handleCreation = useCallback(() => {
    openPayment('creation')
  }, [openPayment])

  return (
    <Page
      width={isWeb ? 720 : null}
      backgroundImg={background.loginBgWeb}
      headerType="NONE"
      title="Choisis ton expérience"
    >
      <View style={styles.pageContent}>
        <ItemContainer
          height={isWeb ? 480 : undefined}
          disableKeyboardHeight
          style={styles.container}
        >
          <View style={styles.content}>
            <View style={styles.heading}>
              <Text style={styles.title}>Que veux-tu faire en premier ?</Text>
              <Text style={styles.subtitle}>
                Tu pourras passer librement de la création à l’écoute après cette étape.
              </Text>
            </View>

            <View style={styles.choice}>
              <View style={styles.choiceText}>
                <Text style={styles.choiceTitle}>Création</Text>
                <Text style={styles.choiceDescription}>
                  Commence ton parcours avec les 10 crédits offerts à ton inscription.
                </Text>
              </View>
              <BorderGradientButton
                title="Créer"
                onPress={handleCreation}
                disabled={loadingChoice !== null}
                containerStyle={styles.button}
              />
            </View>

            <View style={styles.divider} />

            <View style={styles.choice}>
              <View style={styles.choiceText}>
                <Text style={styles.choiceTitle}>Écoute</Text>
                <Text style={styles.choiceDescription}>
                  Retrouve les créations de la communauté dans l’espace Streaming.
                </Text>
              </View>
              <GradientButton
                title={loadingChoice === 'listen' ? 'Ouverture...' : 'Écouter'}
                onPress={handleListen}
                disabled={loadingChoice !== null}
                containerStyle={styles.button}
              />
            </View>
          </View>
        </ItemContainer>
      </View>
    </Page>
  )
}

const styles = StyleSheet.create({
  pageContent: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
  },
  container: {
    width: '100%',
  },
  content: {
    gap: 24,
    paddingHorizontal: 8,
  },
  heading: {
    alignItems: 'center',
    gap: 8,
    marginBottom: 4,
  },
  title: {
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterSemiBold,
    fontSize: 24,
    textAlign: 'center',
  },
  subtitle: {
    color: Palette.gray,
    fontFamily: FONT_FAMILY.InterRegular,
    fontSize: 14,
    lineHeight: 20,
    textAlign: 'center',
  },
  choice: {
    gap: 16,
  },
  choiceText: {
    gap: 6,
  },
  choiceTitle: {
    color: Palette.white,
    fontFamily: FONT_FAMILY.InterSemiBold,
    fontSize: 19,
  },
  choiceDescription: {
    color: Palette.gray,
    fontFamily: FONT_FAMILY.InterRegular,
    fontSize: 14,
    lineHeight: 20,
  },
  button: {
    width: '100%',
  },
  divider: {
    height: 1,
    backgroundColor: Palette.ultraLightWhite,
  },
})

export default RegistrationChoice