import React, { useEffect, useState } from 'react'
import { View } from 'react-native'
import { useIsFocused, useRoute } from '@react-navigation/native'
import { background } from '../../assets'
import FullscreenIntroVideo from '../../components/FullscreenIntroVideo'
import GradientButton from '../../components/GradientButton'
import MusicLandHeader from '../../components/MusicLandHeader'
import Page from '../../layouts/Page'
import { Routes } from '../../navigation'
import { goBack, navigate } from '../../navigation/NavigationService'
import { gutters } from '../../styles'
import { useUserData } from '../../providers/UserDataProvider'

const Compose = () => {
  const { videos } = useUserData()
  const isFocused = useIsFocused()
  const route = useRoute()
  const fromLyrics = route?.params?.fromLyrics === true

  const [videoUrl, setVideoUrl] = useState(null)

  useEffect(() => {
    setVideoUrl(videos?.malik || null)
  }, [videos?.malik])

  const handleBack = () => {
    if (fromLyrics) {
      navigate(Routes.BottomTab, {
        screen: Routes.HomeStack,
        params: {
          screen: Routes.Home,
        },
      })
      return
    }
    goBack()
  }
  return (
    <Page backgroundImg={background.studioBG2} headerType="NONE">
      <MusicLandHeader
        onPressBack={handleBack}
        progress={9}
        // logo={icons.musicLandStudio}
      />
      <View style={{ flex: 1, position: 'relative', justifyContent: 'flex-end' }}>
        <View
          style={{
            paddingBottom: gutters * 2,
            paddingHorizontal: gutters,
            gap: 12,
          }}
        >
          <GradientButton
            title="Composer ma chanson"
            onPress={() => navigate(Routes.ComposeSong, fromLyrics ? { fromLyrics: true } : undefined)}
          />
        </View>
      </View>
      <FullscreenIntroVideo
        visible={isFocused && !!videoUrl}
        url={videoUrl}
        onClose={() => setVideoUrl(null)}
      />
    </Page>
  )
}

export default Compose