import { useNavigation } from '@react-navigation/native'
import { useAtomValue } from 'jotai/utils'
import React, { useEffect } from 'react'
import { Text } from 'react-native'
import { artistInfoAtomFamily } from '../../state/music'
import text from '../../styles/text'
import ArtistArt from './ArtistArt'
import GradientScrollView from './GradientScrollView'

const ArtistDetails: React.FC<{ id: string }> = ({ id }) => {
  const artist = useAtomValue(artistInfoAtomFamily(id))

  if (!artist) {
    return <></>
  }

  return (
    <GradientScrollView
      style={{
        flex: 1,
      }}
      contentContainerStyle={{
        alignItems: 'center',
        // paddingTop: coverSize / 8,
      }}>
      <Text style={text.paragraph}>{artist.name}</Text>
      <ArtistArt id={artist.id} height={200} width={200} />
    </GradientScrollView>
  )
}

const ArtistView: React.FC<{
  id: string
  title: string
}> = ({ id, title }) => {
  const navigation = useNavigation()

  useEffect(() => {
    navigation.setOptions({ title })
  })

  return (
    <React.Suspense fallback={<Text>Loading...</Text>}>
      <ArtistDetails id={id} />
    </React.Suspense>
  )
}

export default React.memo(ArtistView)