import { useRef, useState, useEffect } from 'react'
import { useWindowDimensions, type View } from 'react-native'
import { XStack, YStack, Circle, Text } from '@junwon/aesthetics'
import { useVisa } from '../providers/VisaProvider'

export function VisaCard() {
  const { profile, isSignedIn, membershipState } = useVisa()

  const [stateTitle, setStateTitle] = useState('')
  const [stateSubtitle, setStateSubtitle] = useState('')

  const cardRef = useRef<View>(null)
  const [height, setHeight] = useState(0)
  const { width } = useWindowDimensions()

  useEffect(() => {
    if (membershipState === 'loading') {
      setStateTitle('Checking membership status...')
      setStateSubtitle('')
      return
    }

    if (membershipState === 'active') {
      setStateTitle('Active Member (Unlimited Access)')
      setStateSubtitle('Unlimited access to all features')
      return
    }

    setStateTitle('No membership (Join today!)')
    setStateSubtitle('Join today!')
  }, [membershipState])

  useEffect(() => {
    if (cardRef.current) {
      cardRef.current.measure((x, y, width) => {
        setHeight(width / 1.586)
      })
    }
  }, [width])

  if (!isSignedIn || !profile.email) return null

  return (
    <YStack
      ref={cardRef}
      h={height}
      p="$4"
      jc="space-between"
      br={height * 0.0589}
      bw="$1"
      boc="$gray6"
    >
      <Text
        fos="$5"
        fow="bold"
      >
        {isSignedIn ? profile.email : 'Nobody'}
      </Text>
      <YStack jc="flex-start">
        <XStack
          ai="center"
          gap="$2"
        >
          <Circle
            size="$0.75"
            bc={membershipState === 'active' ? '#06CAEB' : '#FF7725'}
          />
          <Text col="$gray11">{stateTitle}</Text>
        </XStack>
        {/* <XStack
          ai="center"
          gap="$2"
        >
          <Circle
            size="$0.75"
            bc="transparent"
          />
          <Text col="$gray11">{stateSubtitle}</Text>
        </XStack> */}
      </YStack>
    </YStack>
  )
}