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 { useMemo } from 'react'
import { Appbar, Surface } from 'react-native-paper'

export default function ChallengesScreen() {
  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 (
    <Surface style={{ flex: 1 }}>
      <Appbar.Header>
        <Appbar.Content title={"Défis"} />
        <Appbar.Action icon='format-list-bulleted' />
      </Appbar.Header>
      <PenaltyBanner />
      {currentChallenge && <ChallengeCard challenge={currentChallenge} />}
    </Surface>
  )
}