import { useNavigation, useTheme as useNavigationTheme, useRoute } from '@react-navigation/native'
import React, { useCallback, useContext, useEffect, useRef, useState } from 'react'
import {
  Linking,
  Platform,
  Pressable,
  ScrollView,
  StyleSheet,
  TextInput,
  View,
  ViewProps,
  Keyboard,
} from 'react-native'
import LinearGradient from 'react-native-linear-gradient'
import { Heading, Icon, IconButton, IconString, Text, TextButton } from '../../components'
import { ChatContext } from '../../contexts/chat_context'
import {
  useCreateAndroidRippleColor,
  useTheme,
  useInteractionTintedBackgroundColor,
  useScalableNumberOfLines,
  useFontScale,
} from '../../hooks'
import { useAttachmentUploader } from '../../hooks/use_attachment_uploader'
import { useBroadcastTypingStatus } from '../../hooks/use_broadcast_typing_status'
import { useChatConfiguration } from '../../hooks/use_chat_configuration'
import { useMessageCreateOrUpdate } from '../../hooks/use_message_create_or_update'
import { useMessageDraft } from '../../hooks/use_message_draft'
import { ConversationScreenProps } from '../../screens/conversation_screen'
import { ConversationResource, MessageResource } from '../../types'
import {
  DenormalizedAttachmentResourceForCreate,
  DenormalizedMessageAttachmentResourceForCreate,
  FileAttachment,
} from '../../types/resources/denormalized_attachment_resource_for_create'
import {
  Log,
  MAX_FONT_SIZE_MULTIPLIER_LANDMARK,
  platformFontWeightMedium,
  platformPressedOpacityStyle,
} from '../../utils'
import { pickAttachmentPreviewKind } from '../../utils/attachment_kind'
import { canSubmitMessage } from '../../utils/can_submit_message'
import { isInputEditable } from '../../utils/is_input_editable'
import { hasMessageText, stripEmptyTextCharacters } from '../../utils/message_text'
import {
  DocumentPicker,
  DocumentPickerResult,
  Haptic,
  ImagePicker,
  ImagePickerResult,
} from '../../utils/native_adapters'
import { tokens } from '../../vendor/tapestry/tokens'
import { Button } from '../display/button'
import BannerPrimitive from '../primitive/banner_primitive'
import { MessageFormAttachmentFile } from './message_form/message_form_attachment_file'
import { MessageFormAttachmentImage } from './message_form/message_form_attachment_image'
import { MessageFormAttachmentVideo } from './message_form/message_form_attachment_video'

export const MessageForm = {
  Root: MessageFormRoot,

  TextInput: MessageFormInput,
  SubmitButton: MessageFormSubmitBtn,
  AttachmentPicker: MessageFormAttachmentPicker,
  Commands: MessageFormCommands,
}

interface MessagesFormRootProps extends ViewProps {
  conversation: ConversationResource
  currentlyEditingMessage?: MessageResource | null
  replyRootId?: string | null
  replyRootAuthorFirstName?: string | null
  onFlaggedInMessageForm?: (id: string) => void
  onBeforeSubmit?: () => void | Promise<void>
}

const MessageFormContext = React.createContext<{
  text: string
  setText: (text: string) => void
  onSubmit: () => void
  disabled: boolean
  inputEditable: boolean
  canGiphy: boolean
  usingGiphy: boolean
  setUsingGiphy: (usingGiphy: boolean) => void
  attachmentUploader?: ReturnType<typeof useAttachmentUploader>
  currentlyEditingMessage?: MessageResource | null
  reset: () => void
  replyRootId?: string | null
  replyRootAuthorFirstName?: string | null
}>({
  text: '',
  setText: (_text: string) => {},
  onSubmit: () => {},
  disabled: false,
  inputEditable: true,
  canGiphy: false,
  usingGiphy: false,
  setUsingGiphy: (_usingGiphy: boolean) => {},
  currentlyEditingMessage: null,
  reset: () => {},
  replyRootId: undefined,
  replyRootAuthorFirstName: undefined,
})

const GIPHY_MAX_LENGTH = 50
const MAX_MESSAGE_LENGTH = 5000
const PLACEHOLDER_FONT_SCALE_THRESHOLD = 1.7

function MessageFormRoot({
  conversation,
  currentlyEditingMessage,
  children,
  replyRootId,
  replyRootAuthorFirstName,
  onFlaggedInMessageForm,
  onBeforeSubmit,
}: MessagesFormRootProps) {
  const { giphyApiKey } = useContext(ChatContext)
  const canGiphy = !!giphyApiKey && !currentlyEditingMessage
  const styles = useMessageFormStyles()
  const { draft, saveDraft, clearDraft } = useMessageDraft()
  const [text, setText] = React.useState(() => {
    // Initialize from draft only when not editing a message
    return currentlyEditingMessage ? '' : draft?.text || ''
  })
  const [usingGiphy, setUsingGiphy] = useState(false)
  const navigation = useNavigation()
  const route = useRoute() as ConversationScreenProps['route']
  const {
    status,
    isPending,
    reset: resetMutation,
    mutateAsync,
  } = useMessageCreateOrUpdate({
    conversationId: conversation.id,
    message: currentlyEditingMessage || undefined,
    replyRootId,
  })
  const attachmentUploader = useAttachmentUploader({
    conversationId: conversation.id,
    draftAttachments: currentlyEditingMessage ? undefined : draft?.attachments,
    onFlaggedInMessageForm,
  })
  const resetAttachmentUploader = attachmentUploader.reset

  const reset = useCallback(() => {
    resetAttachmentUploader()
    resetMutation()
    setText('')
    setUsingGiphy(false)
    if (!currentlyEditingMessage) {
      clearDraft()
    }
    navigation.setParams({
      editing_message_id: null,
    })
  }, [resetAttachmentUploader, resetMutation, navigation, currentlyEditingMessage, clearDraft])

  useEffect(() => {
    if (canGiphy && !usingGiphy && text.startsWith('/giphy ')) {
      setUsingGiphy(true)
      setText('')
    }
  }, [canGiphy, text, usingGiphy])

  useEffect(() => {
    switch (status) {
      case 'success':
        reset()
        break
    }
  }, [reset, status])

  useEffect(() => {
    if (route.params.clear_input) {
      reset()
      navigation.setParams({ ...route.params, clear_input: false })
    }
  }, [reset, navigation, route.params])

  // Save draft when text or attachments change (debounced)
  useEffect(() => {
    // Don't save drafts when editing a message
    if (currentlyEditingMessage) return

    const timeoutId = setTimeout(() => {
      saveDraft(text, attachmentUploader.attachments)
    }, 500)

    return () => clearTimeout(timeoutId)
  }, [text, attachmentUploader.attachments, saveDraft, currentlyEditingMessage])

  const canSubmit = canSubmitMessage({
    isPending,
    conversationDisabled: conversation.disabled ?? false,
    pendingUploads: !!attachmentUploader?.pendingUploads,
    hasFlaggedAttachments: !!attachmentUploader?.flaggedAttachmentCount,
    hasText: hasMessageText(text),
    hasSendableAttachments: !!attachmentUploader?.attachmentIds?.length,
  })
  const disabled = !canSubmit
  const inputEditable = isInputEditable({
    isPending,
    conversationDisabled: conversation.disabled ?? false,
  })

  /*
    Opening a FormSheet on Android while the keyboard is visible breaks the FormSheet's height & position.
    This is a workaround to ensure we don't open the FormSheet while the keyboard is visible.
  */
  const navigateToSendGiphyAfterKeyboardHides = useCallback(() => {
    if (!Keyboard.isVisible() || Platform.OS === 'ios') {
      navigation.navigate('SendGiphy', {
        conversation_id: conversation.id,
        reply_root_id: replyRootId,
        search_term: text,
      })
    } else {
      const keyboardListener = Keyboard.addListener('keyboardDidHide', () => {
        navigation.navigate('SendGiphy', {
          conversation_id: conversation.id,
          reply_root_id: replyRootId,
          search_term: text,
        })
        keyboardListener?.remove()
      })
    }
  }, [conversation.id, navigation, replyRootId, text])

  const catchingUp = useRef(false)

  // A send from a window behind the live edge would leave a gap above it, so a failed
  // catch-up stops the send and keeps what was typed.
  const catchUpBeforeSend = async () => {
    if (catchingUp.current) return false

    catchingUp.current = true
    try {
      await onBeforeSubmit?.()
      return true
    } catch (error) {
      Log.error('send stopped: live window fetch failed', error)
      return false
    } finally {
      catchingUp.current = false
    }
  }

  const handleSubmit = async () => {
    if (!canSubmit) return

    if (canGiphy && usingGiphy) {
      if (!(await catchUpBeforeSend())) return

      TextInput.State.blurTextInput(TextInput.State.currentlyFocusedInput())
      Haptic.impactLight()
      navigateToSendGiphyAfterKeyboardHides()
    } else {
      let attachmentsForSubmit: DenormalizedAttachmentResourceForCreate[] =
        attachmentUploader.attachments
          .filter(a => a.status === 'success' && a.id)
          .map(
            (attachment): DenormalizedMessageAttachmentResourceForCreate => ({
              type: 'MessageAttachment',
              id: attachment.id as string,
              file: attachment.file,
            })
          )
      const messageText = stripEmptyTextCharacters(text)

      if (currentlyEditingMessage) {
        mutateAsync({ text: messageText })
        reset()
      } else {
        // The live-window fetch replaces the cache, which would wipe an optimistic row
        // added earlier.
        if (!(await catchUpBeforeSend())) return

        mutateAsync({ text: messageText, attachments: attachmentsForSubmit })
        reset()
      }
    }
  }

  useEffect(() => {
    if (currentlyEditingMessage) {
      setText(currentlyEditingMessage.text || '')
    }
  }, [currentlyEditingMessage])

  return (
    <MessageFormContext.Provider
      value={{
        text,
        setText,
        onSubmit: handleSubmit,
        disabled,
        inputEditable,
        canGiphy,
        usingGiphy,
        setUsingGiphy,
        attachmentUploader,
        currentlyEditingMessage,
        reset,
        replyRootId,
        replyRootAuthorFirstName,
      }}
    >
      <View style={styles.container}>
        <EditingIndicator />
        <ReplyIndicator />
        <FlaggedContentBanner />
        <View style={styles.textInputContainer}>{children}</View>
      </View>
    </MessageFormContext.Provider>
  )
}

function MessageFormAttachments() {
  const styles = useMessageFormStyles()
  const { attachmentUploader } = React.useContext(MessageFormContext)
  const numberOfAttachments = attachmentUploader?.attachments?.length || 0
  const attachments = attachmentUploader?.attachments || []

  if (numberOfAttachments === 0) {
    return null
  }

  return (
    <ScrollView
      horizontal
      showsHorizontalScrollIndicator={false}
      contentContainerStyle={styles.messageFormAttachments}
    >
      {attachments.map(attachment => {
        const kind = pickAttachmentPreviewKind(attachment.file.type, attachment.file.name)
        const remove = () => attachmentUploader?.removeAttachment(attachment)

        if (kind === 'video') {
          return (
            <MessageFormAttachmentVideo
              key={attachment.file.uri}
              name={attachment.file.name}
              status={attachment.status}
              removeAttachment={remove}
            />
          )
        }

        if (kind === 'file') {
          return (
            <MessageFormAttachmentFile
              key={attachment.file.uri}
              name={attachment.file.name}
              contentType={attachment.file.type}
              status={attachment.status}
              removeAttachment={remove}
            />
          )
        }

        return (
          <MessageFormAttachmentImage
            key={attachment.file.uri}
            uri={attachment.file.uri}
            alt={attachment.file.name}
            status={attachment.status}
            width={attachment.file.width}
            height={attachment.file.height}
            removeAttachment={remove}
          />
        )
      })}
    </ScrollView>
  )
}

function getFileType(attachments: FileAttachment[]): 'image' | 'video' | 'file' {
  const kinds = new Set(
    attachments.map(({ file }) => {
      if (file.type.startsWith('image/')) return 'image'
      if (file.type.startsWith('video/')) return 'video'
      return 'file'
    })
  )
  return kinds.size === 1 ? [...kinds][0] : 'file'
}

function FlaggedContentBanner() {
  const styles = useMessageFormStyles()
  const { attachmentUploader } = React.useContext(MessageFormContext)
  const flaggedAttachments = attachmentUploader?.attachments.filter(a => a.flagged) ?? []
  const flaggedCount = flaggedAttachments.length

  if (flaggedCount === 0) return null

  const isSingular = flaggedCount === 1
  const fileType = getFileType(flaggedAttachments)
  const buttonTitle = isSingular ? `Remove flagged ${fileType}` : `Remove flagged ${fileType}s`

  return (
    <View style={styles.flaggedBannerContainer}>
      <BannerPrimitive.Root appearance="error">
        <BannerPrimitive.StaticLayout>
          <BannerPrimitive.StatusIcon />
          <BannerPrimitive.Content>
            <BannerMessage isSingular={isSingular} fileType={fileType} />
            <View style={styles.flaggedBannerButtonRow}>
              <Button
                title={buttonTitle}
                size="sm"
                appearance="danger"
                onPress={() => attachmentUploader?.removeFlaggedAttachments()}
                accessibilityLabel={buttonTitle}
              />
            </View>
          </BannerPrimitive.Content>
        </BannerPrimitive.StaticLayout>
      </BannerPrimitive.Root>
    </View>
  )
}

function BannerMessage({ isSingular, fileType }: { isSingular: boolean; fileType: string }) {
  const styles = useMessageFormStyles()

  const contentGuidelinesLink = (
    <Text
      style={styles.flaggedBannerLink}
      onPress={() =>
        Linking.openURL(
          'https://www.planningcenter.com/terms#:~:text=4.%20Acceptable%20Use%20of%20Planning%20Center'
        )
      }
      accessibilityRole="link"
    >
      content guidelines
    </Text>
  )

  return isSingular ? (
    <Text style={styles.flaggedBannerText}>
      An uploaded {fileType} was flagged because it doesn't meet our {contentGuidelinesLink}. Please
      remove before proceeding.
    </Text>
  ) : (
    <Text style={styles.flaggedBannerText}>
      Some uploaded {fileType}s were flagged because they don't meet our {contentGuidelinesLink}.
      Please remove them before proceeding.
    </Text>
  )
}

function MessageFormInput() {
  const styles = useMessageFormStyles()
  const theme = useTheme()
  const fontScale = useFontScale()
  const { text, setText, onSubmit, inputEditable, usingGiphy, attachmentUploader, replyRootId } =
    React.useContext(MessageFormContext)
  const attachmentError = attachmentUploader?.errorMessage

  const broadcastTypingStatus = useBroadcastTypingStatus()

  const handleTextChange = (newText: string) => {
    setText(newText)

    if (newText.length > 0) {
      broadcastTypingStatus()
    }
  }

  const compactPlaceholder = fontScale >= PLACEHOLDER_FONT_SCALE_THRESHOLD
  let placeholder = compactPlaceholder ? 'Message' : 'Send a message'
  if (replyRootId) {
    placeholder = compactPlaceholder ? 'Reply' : 'Send a reply'
  }
  if (usingGiphy) {
    placeholder = compactPlaceholder ? 'Search' : 'Search GIFs'
  }

  return (
    <View style={styles.textInputBoundary}>
      <MessageFormAttachments />
      {attachmentError ? <Text style={styles.inputErrorMessage}>{attachmentError}</Text> : null}
      <View style={styles.textInputRow}>
        {usingGiphy ? (
          <View style={styles.giphyBadge}>
            <Icon name="general.bolt" style={styles.giphyBadgeIcon} />
            <Text variant="tertiary" style={styles.giphyBadgeText}>
              /giphy
            </Text>
          </View>
        ) : null}

        <TextInput
          testID="message-composer-input"
          style={[styles.textInput, usingGiphy && styles.textInputWithGiphy]}
          multiline={true}
          placeholder={placeholder}
          placeholderTextColor={theme.colors.textColorDefaultPlaceholder}
          onChangeText={handleTextChange}
          value={text}
          maxLength={usingGiphy ? GIPHY_MAX_LENGTH : MAX_MESSAGE_LENGTH}
          onSubmitEditing={onSubmit}
          submitBehavior={usingGiphy ? 'submit' : 'newline'}
          editable={inputEditable}
        />
      </View>
    </View>
  )
}

const SUBMIT_ACCESSIBILITY_LABEL_MAP = {
  giphy: 'Search Giphy',
  editing: 'Save changes',
  send: 'Send message',
} as const

const SUBMIT_ICON_NAME_MAP = {
  giphy: 'general.search',
  editing: 'general.check',
  send: 'general.upArrow',
} as const

function MessageFormSubmitBtn() {
  const { onSubmit, disabled, usingGiphy, currentlyEditingMessage } =
    React.useContext(MessageFormContext)
  const styles = useMessageFormStyles()
  const { colors } = useTheme()

  const formStateKey = usingGiphy ? 'giphy' : currentlyEditingMessage ? 'editing' : 'send'
  const colorKey = disabled ? 'disabled' : 'interaction'
  const interactionStart = colors.buttonStart || colors.interaction
  const interactionEnd = colors.buttonEnd || colors.interaction
  const colorMap = {
    disabled: [
      colors.fillColorButtonNeutralSolidDisabled,
      colors.fillColorButtonNeutralSolidDisabled,
    ],
    interaction: [interactionStart, interactionEnd],
  }

  const androidRippleColor = useCreateAndroidRippleColor({ color: colorMap[colorKey][0] })
  const gradientColors = colorMap[colorKey] as [string, string]
  const iconStyles = [styles.submitIcon, disabled && styles.submitIconDisabled]

  return (
    <Pressable
      disabled={disabled}
      onPress={onSubmit}
      accessibilityRole="button"
      accessibilityLabel={SUBMIT_ACCESSIBILITY_LABEL_MAP[formStateKey]}
      style={({ pressed }) => [
        styles.submitPressableWrapper,
        pressed && platformPressedOpacityStyle,
      ]}
      android_ripple={{ color: androidRippleColor, borderless: false, foreground: true }}
    >
      <LinearGradient
        start={{ x: 0.1, y: 0.1 }}
        end={{ x: 0.9, y: 0.9 }}
        colors={gradientColors}
        style={styles.submitGradientWrapper}
      >
        <Icon
          name={SUBMIT_ICON_NAME_MAP[formStateKey]}
          style={iconStyles}
          accessibilityElementsHidden={true}
        />
      </LinearGradient>
    </Pressable>
  )
}

function MessageFormAttachmentPicker() {
  const styles = useMessageFormStyles()
  const { usingGiphy, attachmentUploader, currentlyEditingMessage } =
    React.useContext(MessageFormContext)
  const { allowedMimeTypes } = useChatConfiguration()
  const [isOpen, setIsOpen] = useState(false)

  function uploadImagePickerResult(result: ImagePickerResult) {
    if (result.canceled) {
      return
    }

    const filteredAssets = result.assets
      .filter(asset => {
        return asset.fileSize && asset.mimeType && asset.uri
      })
      .map(asset => {
        return {
          uri: asset.uri,
          name: asset.fileName || asset.uri.split('/').pop() || 'attachment',
          type: asset.mimeType as string,
          size: asset.fileSize as number,
          height: asset.height,
          width: asset.width,
        }
      })

    attachmentUploader?.handleFilesAttached(filteredAssets)
  }

  function uploadDocumentPickerResult(result: DocumentPickerResult) {
    if (result.canceled) return

    const filteredAssets = result.assets
      .filter(asset => asset.size != null && asset.uri)
      .map(asset => ({
        uri: asset.uri,
        name: asset.name,
        type: asset.mimeType || 'application/octet-stream',
        size: asset.size as number,
      }))

    attachmentUploader?.handleFilesAttached(filteredAssets)
  }

  const openCamera = async () => {
    setIsOpen(false)
    let result = await ImagePicker.openCameraAsync()
    if (!result.canceled) {
      uploadImagePickerResult(result)
    }
  }

  const pickImage = async () => {
    setIsOpen(false)
    let result = await ImagePicker.openImageLibraryAsync()
    if (!result.canceled) {
      uploadImagePickerResult(result)
    }
  }

  const pickFile = async () => {
    setIsOpen(false)
    let result = await DocumentPicker.openAsync({ mimeTypes: allowedMimeTypes })
    if (!result.canceled) {
      uploadDocumentPickerResult(result)
    }
  }

  if (usingGiphy || currentlyEditingMessage) {
    return null
  }

  return (
    <View style={styles.attachmentPicker}>
      {isOpen && (
        <View style={styles.attachmentPickerButtonsContainer}>
          <IconButton
            accessibilityLabel="Take a photo"
            accessibilityHint="Opens your camera"
            size="lg"
            appearance="neutral"
            name="chat.camera"
            onPress={openCamera}
            style={styles.attachmentPickerButton}
          />
          <IconButton
            accessibilityLabel="Choose a photo"
            accessibilityHint="Opens your photo gallery"
            size="lg"
            appearance="neutral"
            name="churchCenter.photosIos"
            onPress={pickImage}
            style={styles.attachmentPickerButton}
          />
          {DocumentPicker.configured && (
            <IconButton
              accessibilityLabel="Attach a file"
              accessibilityHint="Opens your files to attach documents"
              size="lg"
              appearance="neutral"
              name="general.blankFile"
              onPress={pickFile}
              style={styles.attachmentPickerButton}
            />
          )}
        </View>
      )}
      <IconButton
        accessibilityLabel="File Menu"
        accessibilityHint="Opens options to attach or take a photo"
        size="lg"
        appearance="neutral"
        name="general.paperclip"
        onPress={() => setIsOpen(!isOpen)}
        style={styles.formButton}
      />
    </View>
  )
}

function MessageFormCommands() {
  const { text, canGiphy, usingGiphy, setUsingGiphy } = React.useContext(MessageFormContext)
  const styles = useMessageFormStyles()

  if (!canGiphy) {
    return null
  }

  if (usingGiphy) {
    return (
      <IconButton
        accessibilityLabel="Exit Giphy Search"
        accessibilityHint="Changes input back to a text field for sending messages"
        size="lg"
        appearance="neutral"
        name="general.xCircle"
        onPress={() => setUsingGiphy(false)}
        style={styles.formButton}
      />
    )
  }

  return (
    <IconButton
      accessibilityLabel="Search Giphy"
      accessibilityHint="Changes input into a search field for finding Giphys"
      size="lg"
      appearance="neutral"
      name={'general.bolt'}
      onPress={() => setUsingGiphy(true)}
      disabled={text.length > GIPHY_MAX_LENGTH}
      style={styles.formButton}
    />
  )
}

function EditingIndicator() {
  const { currentlyEditingMessage, reset } = React.useContext(MessageFormContext)

  if (!currentlyEditingMessage) {
    return null
  }

  return (
    <FormIndicatorRow
      title="Editing message"
      buttonText="Cancel"
      accessibilityHint="Exit message editing mode without saving"
      iconName="accounts.editor"
      onPress={() => reset()}
    />
  )
}

function ReplyIndicator() {
  const { replyRootId, replyRootAuthorFirstName } = React.useContext(MessageFormContext)
  const navigation = useNavigation()
  const title = replyRootAuthorFirstName ? `Reply to ${replyRootAuthorFirstName}` : 'Reply'

  if (!replyRootId) return null

  return (
    <FormIndicatorRow
      title={title}
      buttonText="Exit replies"
      accessibilityHint="Return to the main conversation"
      iconName="registrations.undo"
      onPress={() => navigation.goBack()}
    />
  )
}

interface FormIndicatorRowProps {
  title: string
  buttonText: string
  accessibilityHint: string
  onPress: () => void
  iconName: IconString
}

function FormIndicatorRow({
  title,
  buttonText,
  accessibilityHint,
  iconName,
  onPress,
}: FormIndicatorRowProps) {
  const styles = useMessageFormStyles()
  const scalableNumberOfLines = useScalableNumberOfLines(1)

  return (
    <View style={styles.formIndicatorRow}>
      <View style={styles.formIndicatorRowTitleContainer}>
        <Icon name={iconName} size={16} style={styles.formIndicatorRowIcon} />
        <Heading
          variant="h4"
          style={styles.formIndicatorRowTitle}
          numberOfLines={scalableNumberOfLines}
          maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
        >
          {title}
        </Heading>
      </View>
      <TextButton
        onPress={onPress}
        accessibilityHint={accessibilityHint}
        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
      >
        {buttonText}
      </TextButton>
    </View>
  )
}

const useMessageFormStyles = () => {
  const theme = useTheme()
  const navigationTheme = useNavigationTheme()
  const buttonSize = 38

  const giphyBadgeBackgroundColor = useInteractionTintedBackgroundColor()

  return StyleSheet.create({
    container: {
      borderColor: theme.colors.borderColorDefaultDim,
      borderTopWidth: 1,
      padding: 12,
    },
    textInputContainer: {
      backgroundColor: navigationTheme.colors.card,
      flexDirection: 'row',
      alignItems: 'flex-end',
      gap: 16,
    },
    textInputBoundary: {
      overflow: 'hidden',
      borderRadius: 24,
      borderWidth: 1,
      borderColor: theme.colors.fillColorNeutral050Base,
      flex: 1,
      gap: 8,
    },
    textInputRow: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
    },
    textInput: {
      paddingBottom: 8,
      // TODO: Remove iOS's extra top padding and use `textAlignVertical: "center"` for both platforms when services-react-native upgrades to v0.74.5 or greater.
      paddingTop: Platform.select({
        ios: 9, // Extra padding compensates for `textAlignVertical` not working in Services iOS.
        default: 8,
      }),
      textAlignVertical: Platform.select({
        ios: 'top', // Services iOS doesn't support `textAlignVertical` due to its lower React Native version of 0.72.14. (React Native 0.74.5+ seems to support this style.)
        default: 'center', // centers the text vertically for multiline TextInput.
      }),
      paddingHorizontal: 16,
      color: theme.colors.textColorDefaultPrimary,
      justifyContent: 'center',
      flex: 1,
      fontSize: 16,
      maxHeight: 200,
    },
    textInputWithGiphy: {
      paddingLeft: 0,
    },
    giphyBadge: {
      backgroundColor: giphyBadgeBackgroundColor,
      borderRadius: 24,
      paddingVertical: 4,
      paddingHorizontal: 12,
      marginLeft: 6,
      flexDirection: 'row',
      alignItems: 'center',
      gap: 4,
    },
    giphyBadgeText: {
      color: theme.colors.interaction,
      marginBottom: 1,
    },
    giphyBadgeIcon: {
      color: theme.colors.interaction,
    },
    formButton: {
      height: buttonSize,
    },
    submitPressableWrapper: {
      borderRadius: buttonSize,
      overflow: 'hidden',
    },
    submitGradientWrapper: {
      flexDirection: 'row',
      justifyContent: 'center',
      alignItems: 'center',
      borderRadius: buttonSize,
      height: buttonSize,
      width: buttonSize,
    },
    submitIcon: {
      fontSize: 16,
      color: tokens.colorNeutral100White,
    },
    submitIconDisabled: {
      color: theme.colors.iconColorDefaultDisabled,
    },
    attachmentPicker: {
      position: 'relative',
    },
    attachmentPickerButtonsContainer: {
      position: 'absolute',
      left: 0,
      bottom: 40,
      zIndex: 10,
      gap: 12,
    },
    attachmentPickerButton: {
      backgroundColor: theme.colors.fillColorNeutral070,
      borderRadius: 20,
      height: buttonSize,
      width: buttonSize,
      elevation: 3,
      ...Platform.select({
        ios: {
          borderWidth: 1,
          borderColor: theme.colors.borderColorDefaultBase,
        },
        default: null,
      }),
    },
    messageFormAttachments: {
      overflow: 'hidden',
      paddingHorizontal: 12,
      paddingTop: 12,
      gap: 8,
    },
    inputErrorMessage: {
      color: theme.colors.statusErrorText,
      fontSize: 14,
      paddingHorizontal: 16,
      paddingVertical: 4,
    },
    flaggedBannerContainer: {
      paddingBottom: 12,
    },
    flaggedBannerText: {
      color: theme.colors.textColorDefaultPrimary,
      fontSize: 14,
    },
    flaggedBannerLink: {
      color: theme.colors.textColorDefaultPrimary,
      fontSize: 14,
      textDecorationLine: 'underline' as const,
    },
    flaggedBannerButtonRow: {
      flexDirection: 'row',
      justifyContent: 'flex-end',
      marginTop: 4,
    },
    formIndicatorRow: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 8,
      paddingBottom: 12,
    },
    formIndicatorRowTitleContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 8,
      flex: 1,
    },
    formIndicatorRowIcon: {
      color: theme.colors.iconColorDefaultSecondary,
    },
    formIndicatorRowTitle: {
      fontWeight: platformFontWeightMedium,
      textTransform: 'none',
      flexShrink: 1,
    },
  })
}