import ChallengeCard from '@/components/ChallengeCard'
import PenaltyBanner from '@/components/PenalyBanner'
import { useChallengeActions } from '@/hooks/useChallengeActions'
import { useChallenges } from '@/hooks/useChallenges'
import { useGame } from '@/hooks/useGame'
import { FontAwesome6 } from '@expo/vector-icons'
import { useMemo } from 'react'
import { View } from 'react-native'
import { Appbar, Banner, FAB, MD3Colors, Surface, Text } from 'react-native-paper'

function ChallengeScreenHeader() {
  return <>
    <Appbar.Header>
      <Appbar.Content title={"Défis"} />
      <Appbar.Action icon='format-list-bulleted' />
    </Appbar.Header>
    <PenaltyBanner />
  </>
}

function ChallengeScreenBody() {
  const game = useGame()
  const challengeActions = useChallengeActions()
  const challenges = useChallenges()
  const currentChallengeAction = useMemo(() => {
    if (!game.currentChallengeId)
      return null
    return challengeActions.challengeActions.find((action) => action.id === game.currentChallengeId)
  }, [game, challengeActions])
  const currentChallenge = useMemo(() => {
    if (!currentChallengeAction)
      return null
    return challenges.challenges.find((challenge) => challenge.id === currentChallengeAction.challengeId)
  }, [currentChallengeAction, challenges])

  return <>
    {currentChallenge && <ChallengeCard challenge={currentChallenge} />}
    {!currentChallenge && game.currentRunner && <>
      <Banner
          visible={!currentChallenge && game.currentRunner}
          icon='cancel'
          style={{ backgroundColor: MD3Colors.error40 }}>
        <Text variant='titleMedium' style={{ textAlign: 'center' }}>Aucun défi en cours.</Text>
      </Banner>
      <View style={{ flexGrow: 1, justifyContent: 'center', alignItems: 'center' }}>
        <FAB icon='cards' variant='tertiary' style={{ width: 250, height: 250, borderRadius: 20, justifyContent: 'center' }} size='large' label='Tirer un défi' />
      </View>
    </>}
    <Banner
        visible={game.gameStarted && !game.currentRunner}
        icon={({ size }) => <FontAwesome6 name='cat' size={size} color={'pink'} />}
        style={{ backgroundColor: MD3Colors.secondary30 }}>
      Vous êtes poursuiveuse, et n'avez donc pas de défi à accomplir.
    </Banner>
  </>
}

export default function ChallengesScreen() {
  return (
    <Surface style={{ flex: 1 }}>
      <ChallengeScreenHeader />
      <ChallengeScreenBody />
    </Surface>
  )
}