import {type GestureResponderEvent, View} from 'react-native'
import {msg, Trans} from '@lingui/macro'
import {useLingui} from '@lingui/react'

import {TIMELINE_SAVED_FEED} from '#/lib/constants'
import {useAddSavedFeedsMutation} from '#/state/queries/preferences'
import {atoms as a, useTheme} from '#/alf'
import {InlineLinkText} from '#/components/Link'
import {Text} from '#/components/Typography'

export function NoFollowingFeed({onAddFeed}: {onAddFeed?: () => void}) {
  const t = useTheme()
  const {_} = useLingui()
  const {mutateAsync: addSavedFeeds} = useAddSavedFeedsMutation()

  const addRecommendedFeeds = (e: GestureResponderEvent) => {
    e.preventDefault()

    addSavedFeeds([
      {
        ...TIMELINE_SAVED_FEED,
        pinned: true,
      },
    ])

    onAddFeed?.()

    // prevent navigation
    return false as const
  }

  return (
    <View style={[a.flex_row, a.flex_wrap, a.align_center, a.py_md, a.px_lg]}>
      <Text style={[a.leading_snug, t.atoms.text_contrast_medium]}>
        <Trans>
          Looks like you're missing a following feed.{' '}
          <InlineLinkText
            to="#"
            label={_(msg`Add the default feed of only people you follow`)}
            onPress={addRecommendedFeeds}
            style={[a.leading_snug]}>
            Click here to add one.
          </InlineLinkText>
        </Trans>
      </Text>
    </View>
  )
}