import {Stack} from 'expo-router'
import {useEffect} from 'react'
import {View} from 'react-native'

import {RequestList} from '@/components/request-list'
import {TrailInviteList} from '@/components/trail-invite-list'
import {Card, CardLabel} from '@/components/ui/card'
import {Layout} from '@/components/ui/layout'
import {atoms as a} from '@/sprinkles'
import {useFriendRequests, useRefreshRequests} from '@/stores/friends'
import {
  useRefreshTrailInvites,
  useTrailInvites,
} from '@/stores/trail-invites'

export default function NotificationsScreen() {
  const requests = useFriendRequests()
  const refreshRequests = useRefreshRequests()
  const invites = useTrailInvites()
  const refreshInvites = useRefreshTrailInvites()

  useEffect(() => {
    void refreshRequests()
    void refreshInvites()
  }, [refreshRequests, refreshInvites])

  return (
    <>
      <Stack.Screen options={{title: 'Notifications'}} />
      <Layout.ModalContent>
        <Layout.Column>
          <View style={a.gap_xs}>
            <CardLabel>Friend requests</CardLabel>
            <Card>
              <RequestList requests={requests} />
            </Card>
          </View>
          <View style={a.gap_xs}>
            <CardLabel>Trail invites</CardLabel>
            <Card>
              <TrailInviteList invites={invites} />
            </Card>
          </View>
        </Layout.Column>
      </Layout.ModalContent>
    </>
  )
}
