import {StyleSheet} from 'react-native'
import Animated from 'react-native-reanimated'
import {useSafeAreaInsets} from 'react-native-safe-area-context'
import {useMediaQuery} from 'react-responsive'

import {HITSLOP_20} from '#/lib/constants'
import {PressableScale} from '#/lib/custom-animations/PressableScale'
import {useMinimalShellFabTransform} from '#/lib/hooks/useMinimalShellTransform'
import {clamp} from '#/lib/numbers'
import {useSession} from '#/state/session'
import {
  atoms as a,
  useBreakpoints,
  useLayoutBreakpoints,
  useTheme,
  web,
} from '#/alf'
import {useInteractionState} from '#/components/hooks/useInteractionState'
import {ArrowTop_Stroke2_Corner0_Rounded as ArrowIcon} from '#/components/icons/Arrow'
import {CENTER_COLUMN_OFFSET} from '#/components/Layout'
import {SubtleHover} from '#/components/SubtleHover'
import {IS_NATIVE, IS_WEB} from '#/env'

export function LoadLatestBtn({
  onPress,
  label,
  showIndicator,
}: {
  onPress: () => void
  label: string
  showIndicator: boolean
}) {
  const {hasSession} = useSession()
  const {centerColumnOffset} = useLayoutBreakpoints()
  const {gtMobile, gtTablet} = useBreakpoints()
  const fabMinimalShellTransform = useMinimalShellFabTransform()
  const insets = useSafeAreaInsets()
  const t = useTheme()
  const {
    state: hovered,
    onIn: onHoverIn,
    onOut: onHoverOut,
  } = useInteractionState()

  // move button inline if it starts overlapping the left nav
  const isTallViewport = useMediaQuery({minHeight: 700})

  // Adjust height of the fab if we have a session only on mobile web. If we don't have a session, we want to adjust
  // it on both tablet and mobile since we are showing the bottom bar (see createNativeStackNavigatorWithAuth)
  const showBottomBar = IS_NATIVE || (hasSession ? !gtMobile : !gtTablet)

  const isTablet = gtMobile && !gtTablet
  const isMobileWeb = IS_WEB && !gtMobile
  const bottomInset = gtMobile ? a.pb_lg.paddingBottom : a.pb_md.paddingBottom
  const bottomGutter = isMobileWeb ? a.pb_lg.paddingBottom : bottomInset
  const shouldAccountForBottomBar = !gtMobile || (isTablet && showBottomBar)
  const bottomPosition = {
    bottom: shouldAccountForBottomBar
      ? clamp(insets.bottom, bottomInset, 60) + bottomGutter
      : bottomInset,
  }

  return (
    <Animated.View
      testID="loadLatestBtn"
      style={[
        a.fixed,
        a.z_20,
        {left: gtMobile ? a.pl_lg.paddingLeft : a.pl_md.paddingLeft},
        gtTablet &&
          (isTallViewport
            ? styles.loadLatestOutOfLine
            : styles.loadLatestInline),
        gtMobile &&
          !gtTablet &&
          (centerColumnOffset
            ? styles.loadLatestInlineOffset
            : styles.loadLatestInline),
        bottomPosition,
        showBottomBar && fabMinimalShellTransform,
      ]}>
      <PressableScale
        style={[
          {
            width: 42,
            height: 42,
          },
          a.rounded_full,
          a.align_center,
          a.justify_center,
          a.border,
          t.atoms.border_contrast_low,
          showIndicator ? {backgroundColor: t.palette.primary_50} : t.atoms.bg,
        ]}
        onPress={onPress}
        hitSlop={HITSLOP_20}
        accessibilityLabel={label}
        accessibilityHint=""
        targetScale={0.9}
        onPointerEnter={onHoverIn}
        onPointerLeave={onHoverOut}>
        <SubtleHover hover={hovered} style={[a.rounded_full]} />
        <ArrowIcon
          size="md"
          style={[
            a.z_10,
            showIndicator
              ? {color: t.palette.primary_500}
              : t.atoms.text_contrast_medium,
          ]}
        />
      </PressableScale>
    </Animated.View>
  )
}

const styles = StyleSheet.create({
  loadLatestInline: {
    left: web('calc(50vw - 292px)'),
  },
  loadLatestInlineOffset: {
    left: web(`calc(50vw - 292px + ${CENTER_COLUMN_OFFSET}px)`),
  },
  loadLatestOutOfLine: {
    left: web('calc(50vw - 382px)'),
  },
})