import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
import React from 'react'
import { Image as NativeImage, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
import { Button, IconButton, IconString, TextButton } from '../components'
import { DefaultLoading } from '../components/page/loading'
import BlankState from '../components/primitive/blank_state_primitive'
import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
import { useCreateAndroidRippleColor, useTheme } from '../hooks'
import { useGiphy } from '../hooks/use_giphy'
import { useMessageCreateOrUpdate } from '../hooks/use_message_create_or_update'
import { tokens } from '../vendor/tapestry/tokens'

export const SendGiphyScreenOptions = getFormSheetScreenOptions({
  headerTitle: 'Send Giphy',
  sheetAllowedDetents: Platform.select({ android: [0.7, 0.94], default: [0.7, 1] }),
})

export type SendGiphyScreenProps = StaticScreenProps<{
  conversation_id: number
  reply_root_id?: string | null
  search_term: string
}>

export function SendGiphyScreen({ route }: SendGiphyScreenProps) {
  const { conversation_id, reply_root_id, search_term } = route.params
  const styles = useStyles()
  const navigation = useNavigation()

  const { isPending, mutate } = useMessageCreateOrUpdate({
    conversationId: conversation_id,
    replyRootId: reply_root_id,
  })
  const { isSearching, result, nextResult, prevResult } = useGiphy(search_term)
  const disabled = isPending || isSearching

  const { width } = useWindowDimensions()
  const size = width - 24

  if (!result)
    return (
      <FormSheet.Root contentStyle={styles.blankStateContainer}>
        <BlankState.Root style={styles.blankState}>
          <BlankState.Imagery name="general.bolt" />
          <BlankState.Content>
            <BlankState.Heading>No Giphys found</BlankState.Heading>
            <BlankState.Text>Try a different search term.</BlankState.Text>
          </BlankState.Content>
          <BlankState.Button onPress={() => navigation.goBack()} title="Close" />
        </BlankState.Root>
      </FormSheet.Root>
    )

  const gif = result.giphy.fixed_width
  const { url } = gif

  function goBack({ clearInput = false }) {
    if (clearInput) {
      const routeName = reply_root_id ? 'ConversationReply' : 'Conversation'
      const routes = navigation.getState()?.routes || []
      const conversationParams = routes.findLast(r => r.name === routeName)?.params || {}

      navigation.dispatch(
        StackActions.popTo(routeName, {
          ...conversationParams,
          conversation_id,
          clear_input: true,
        })
      )
    } else {
      navigation.goBack()
    }
  }

  function sendGiphy() {
    if (disabled) return

    mutate({ text: '', attachments: [result] })
    goBack({ clearInput: true })
  }

  return (
    <FormSheet.Root contentStyle={styles.container}>
      <View style={styles.poweredByGiphyContainer}>
        <NativeImage
          alt="Powered by Giphy"
          style={styles.poweredByGiphyImage}
          source={{ uri: poweredByGiphyImage }}
        />
      </View>
      <View style={styles.controlToolbar} accessibilityRole="toolbar">
        <View style={styles.paginateButtonGroup}>
          <PaginateButton
            name="general.leftArrow"
            accessibilityLabel="Previous Giphy"
            onPress={prevResult}
            disabled={disabled}
          />
          <PaginateButton
            name="general.rightArrow"
            accessibilityLabel="Next GIF"
            onPress={nextResult}
            disabled={disabled}
          />
        </View>
        <View style={styles.formButtonGroup}>
          <TextButton
            onPress={() => goBack({ clearInput: false })}
            maxFontSizeMultiplier={1}
            accessibilityHint="Cancels the Giphy selection and closes this modal."
          >
            Cancel
          </TextButton>
          <Button
            onPress={sendGiphy}
            title="Send"
            size="lg"
            disabled={disabled}
            maxFontSizeMultiplier={1}
            accessibilityLabel="Send Giphy"
            accessibilityHint="Sends the selected Giphy as a message to the conversation."
          />
        </View>
      </View>
      {isSearching ? (
        <DefaultLoading />
      ) : (
        <NativeImage
          source={{ uri: url }}
          alt={result.title}
          style={[styles.image, { width: size, height: size }]}
        />
      )}
    </FormSheet.Root>
  )
}

interface PaginateButtonProps {
  name: IconString
  accessibilityLabel: string
  onPress: () => void
  disabled: boolean
}

function PaginateButton({ name, accessibilityLabel, onPress, disabled }: PaginateButtonProps) {
  const styles = useStyles()
  const { colors } = useTheme()
  const androidRippleColor = useCreateAndroidRippleColor({ color: colors.interaction })

  return (
    <IconButton
      name={name}
      accessibilityLabel={accessibilityLabel}
      size="md"
      appearance="interaction"
      onPress={onPress}
      disabled={disabled}
      style={[styles.paginateButton, disabled && styles.paginateButtonDisabled]}
      android_ripple={{
        color: androidRippleColor,
        borderless: true,
        foreground: true,
      }}
      maxFontSizeMultiplier={1}
    />
  )
}

const useStyles = () => {
  const { colors } = useTheme()

  return StyleSheet.create({
    container: {
      paddingTop: 32,
      paddingHorizontal: 16,
      gap: 8,
    },
    blankStateContainer: {
      paddingVertical: 64,
    },
    blankState: {
      flex: 0,
      flexGrow: 1,
    },
    poweredByGiphyContainer: {
      alignSelf: 'flex-start',
      padding: 4,
      borderRadius: 4,
      backgroundColor: colors.name === 'dark' ? tokens.colorNeutral68 : 'transparent',
    },
    poweredByGiphyImage: {
      width: 170,
      height: 20,
    },
    controlToolbar: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
    },
    formButtonGroup: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 16,
    },
    paginateButtonGroup: {
      flexDirection: 'row',
      gap: 8,
    },
    paginateButton: {
      borderColor: colors.interaction,
      borderWidth: 1,
      height: 28,
      paddingHorizontal: 12,
      borderRadius: 16,
      overflow: 'hidden',
    },
    paginateButtonDisabled: {
      backgroundColor: colors.fillColorButtonNeutralSolidDisabled,
      borderColor: colors.fillColorButtonNeutralSolidDisabled,
    },
    image: {
      borderRadius: 8,
      maxWidth: '100%',
    },
  })
}

const poweredByGiphyImage = `data:image/png;base64,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`