import {useLocalSearchParams} from 'expo-router'

import {ModalListScreen} from '@/components/modal-list-screen'
import {Text} from '@/components/ui/typography'
import {UserList} from '@/components/user-list'
import {useTrailReactors} from '@/hooks/use-trail-reactors'
import {atoms as a} from '@/sprinkles'

export default function CrumbReactorsScreen() {
  const {trailId, crumbId} = useLocalSearchParams<{
    trailId: string
    crumbId: string
  }>()
  const {reactors, loading, error} = useTrailReactors(
    trailId,
    crumbId,
  )

  const emojiByUser = new Map(
    reactors.map((r) => [r.user.id, r.emoji]),
  )

  return (
    <ModalListScreen title="Reactions" error={error}>
      <UserList
        users={reactors.map((r) => r.user)}
        loading={loading}
        showStatus={false}
        emptyMessage="No reactions yet"
        accessory={(user) => (
          <Text emoji style={a.text_lg}>
            {emojiByUser.get(user.id)}
          </Text>
        )}
      />
    </ModalListScreen>
  )
}
