import {type StyleProp, View, type ViewStyle} from 'react-native'
import {LinearGradient} from 'expo-linear-gradient'
import {msg} from '@lingui/core/macro'
import {useLingui} from '@lingui/react'
import {Trans} from '@lingui/react/macro'

import {PressableScale} from '#/lib/custom-animations/PressableScale'
import {useHaptics} from '#/lib/haptics'
import {useHideBottomBarBorderForScreen} from '#/lib/hooks/useHideBottomBarBorder'
import {useEnableSquareButtons} from '#/state/preferences/enable-square-buttons'
import {useProfileQuery} from '#/state/queries/profile'
import {useSession} from '#/state/session'
import {UserAvatar} from '#/view/com/util/UserAvatar'
import {atoms as a, ios, native, useBreakpoints, useTheme} from '#/alf'
import {transparentifyColor} from '#/alf/util/colorGeneration'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {Text} from '#/components/Typography'

export function ThreadComposePrompt({
  onPressCompose,
  style,
}: {
  onPressCompose: () => void
  style?: StyleProp<ViewStyle>
}) {
  const {gtMobile} = useBreakpoints()
  const t = useTheme()

  useHideBottomBarBorderForScreen()

  return (
    <View
      style={[
        a.px_sm,
        gtMobile
          ? [a.py_xs, a.border_t, t.atoms.border_contrast_low, t.atoms.bg]
          : [a.pb_2xs],
        style,
      ]}>
      {!gtMobile && (
        <LinearGradient
          key={t.name} // android does not update when you change the colors. sigh.
          start={[0.5, 0]}
          end={[0.5, 1]}
          colors={[
            transparentifyColor(t.atoms.bg.backgroundColor, 0),
            t.atoms.bg.backgroundColor,
          ]}
          locations={[0.15, 0.4]}
          style={[a.absolute, a.inset_0]}
        />
      )}
      <ThreadComposePromptPill onPress={onPressCompose} />
    </View>
  )
}

/**
 * The "Write your reply" pill. Shared by the sticky thread prompt and the
 * inline reader-seam prompt so the two stay visually identical.
 */
export function ThreadComposePromptPill({onPress}: {onPress: () => void}) {
  const t = useTheme()
  const {_} = useLingui()
  const {gtMobile} = useBreakpoints()
  const {currentAccount} = useSession()
  const {data: profile} = useProfileQuery({did: currentAccount?.did})
  const playHaptic = useHaptics()
  const enableSquareButtons = useEnableSquareButtons()
  const {
    state: hovered,
    onIn: onHoverIn,
    onOut: onHoverOut,
  } = useInteractionState()

  return (
    <PressableScale
      accessibilityRole="button"
      accessibilityLabel={_(msg`Compose reply`)}
      accessibilityHint={_(msg`Opens composer`)}
      onPress={() => {
        onPress()
        playHaptic('Light')
      }}
      onLongPress={ios(() => {
        onPress()
        playHaptic('Heavy')
      })}
      onHoverIn={onHoverIn}
      onHoverOut={onHoverOut}
      style={[
        a.flex_row,
        a.align_center,
        a.p_sm,
        a.gap_sm,
        enableSquareButtons ? a.rounded_sm : a.rounded_full,
        (!gtMobile || hovered) && t.atoms.bg_contrast_25,
        native([a.border, t.atoms.border_contrast_low]),
        a.transition_color,
      ]}>
      <UserAvatar
        size={24}
        avatar={profile?.avatar}
        type={profile?.associated?.labeler ? 'labeler' : 'user'}
      />
      <Text style={[a.text_md, t.atoms.text_contrast_medium]}>
        <Trans>Write your reply</Trans>
      </Text>
    </PressableScale>
  )
}