import {type TrailCrumb} from '@crumbs/core/schemas'
import {useRouter} from 'expo-router'

import {showActionSheet} from '@/lib/dialogs'
import {
  reactToCrumb,
  removeCrumbFromTrail,
} from '@/stores/trail-crumbs'

const REACTION_EMOJIS = ['❤️', '🔥', '😍', '🤔', '👎']

// the long-press sheet on a crumb inside a trail: pick or clear a
// reaction, see who reacted, plus remove-from-trail when the caller allows it
export const useCrumbReactionSheet = (
  trailId: string,
  canRemoveCrumb: (crumb: TrailCrumb) => boolean,
) => {
  const router = useRouter()

  return (crumb: TrailCrumb) => {
    const {reactions} = crumb
    const mine = reactions.find((r) => r.mine)
    showActionSheet([
      ...REACTION_EMOJIS.map((emoji) => ({
        label: emoji,
        onPress: () => void reactToCrumb(trailId, crumb.id, emoji),
      })),
      ...(mine
        ? [
            {
              label: 'Remove reaction',
              onPress: () =>
                void reactToCrumb(trailId, crumb.id, null),
            },
          ]
        : []),
      ...(reactions.length > 0
        ? [
            {
              label: 'See who reacted',
              onPress: () =>
                router.push(
                  `/trail/reactions/${trailId}?crumbId=${crumb.id}`,
                ),
            },
          ]
        : []),
      ...(canRemoveCrumb(crumb)
        ? [
            {
              label: 'Remove from trail',
              destructive: true,
              onPress: () =>
                void removeCrumbFromTrail(trailId, crumb.id),
            },
          ]
        : []),
    ])
  }
}
