import {
  HeaderTitle as ElementsHeaderTitle,
  HeaderTitleProps,
  PlatformPressable,
} from '@react-navigation/elements'
import { StackActions, StaticScreenProps, useNavigation } from '@react-navigation/native'
import React, {
  useCallback,
  useEffect,
  useRef,
  useState,
  type Dispatch,
  type ReactNode,
  type SetStateAction,
} from 'react'
import {
  Alert,
  FlatList,
  Platform,
  Pressable,
  StyleSheet,
  TextInput,
  View,
  type ViewProps,
  type ViewStyle,
} from 'react-native'
import {
  AdultRequirementNotice,
  Badge,
  Button,
  ChildNotice,
  Heading,
  Icon,
  Person,
  Switch,
  Text,
  TextButton,
  type TextStyle,
} from '../components'
import { ConversationAvatar } from '../components/display/conversation_avatar'
import { useHeaderRight } from '../components/display/platform_modal_header_buttons'
import { ButtonAppearanceUnion } from '../components/display/utils/button_colors'
import { useSuspensePaginator, useTheme } from '../hooks'
import {
  useConversation,
  useConversationArchive,
  useConversationDelete,
  useConversationDisableReplies,
  useConversationMute,
  useConversationUpdate,
} from '../hooks/use_conversation'
import { availableFeatures, useFeatures } from '../hooks/use_features'
import { useManualArchivingEnabled } from '../hooks/use_manual_archiving_enabled'
import { usePreviewAvatarDiameter } from '../hooks/use_preview_avatar_diameter'
import { useUnarchiveConversationAction } from '../hooks/use_unarchive_conversation_action'
import { type ConversationResource, MemberResource, isDefined } from '../types'
import { GroupResource } from '../types/resources/group_resource'
import { MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../utils'
import { archivedConversationMessage, isArchivedConversation } from '../utils/archived_conversation'
import { genderDisplayLabel } from '../utils/gender_display_label'
import { tokens } from '../vendor/tapestry/tokens'
// =========================================
// ====== Factory Constants & Types ========
// =========================================

enum SectionTypes {
  header,
  hidden,
  members,
  loadingMembers,
  navigableSetting,
  setting,
  view,
}

type SectionListData = Array<
  | DataItem<{ title: string; badge?: ReactNode }, SectionTypes.header>
  | DataItem<MemberResource, SectionTypes.members>
  | DataItem<any, SectionTypes.loadingMembers>
  | DataItem<NavigableSettingRowProps, SectionTypes.navigableSetting>
  | DataItem<ViewProps, SectionTypes.view>
  | DataItem<SettingRowProps, SectionTypes.setting>
  | DataItem<any, SectionTypes.hidden>
>

interface DataItem<T, TName extends SectionTypes> {
  type: TName
  data: T
  sectionOuterStyle?: ViewStyle
  sectionInnerStyle?: ViewStyle
  showBottomBorder?: boolean
}

// =================================
// ====== Components ===============
// =================================

export type ConversationDetailsScreenProps = StaticScreenProps<{
  conversation_id: number
}>

export function ConversationDetailsScreen({ route }: ConversationDetailsScreenProps) {
  const navigation = useNavigation()
  const styles = useStyles()

  const { data: conversation } = useConversation(route.params)
  const [title, setTitle] = useState(conversation.title ?? '')
  const { conversation_id } = route.params
  const { repliesDisabled, setRepliesDisabled } = useConversationDisableReplies(route.params)
  const { mutate: saveTitle } = useConversationUpdate(route.params)
  const { mutate: deleteConversation } = useConversationDelete(route.params)
  const { setArchived, isPending: isArchiving } = useConversationArchive(route.params)
  const unarchiveAction = useUnarchiveConversationAction(conversation)
  const { featureEnabled } = useFeatures()
  const granularNotificationsEnabled = featureEnabled(availableFeatures.granular_notifications_ui)
  const customAvatarsEnabled = featureEnabled(availableFeatures.custom_conversation_avatars)
  const manualArchivingEnabled = useManualArchivingEnabled()
  const showGenderFilter =
    featureEnabled(availableFeatures.gender_specific_conversations) && !!conversation.genderOption
  const genderLabel = conversation.genderOption ? genderDisplayLabel(conversation.genderOption) : ''
  const { muted, setMuted } = useConversationMute({ conversation_id })

  const trimmedTitle = title.trim()
  const emptyTitle = trimmedTitle === ''

  const notificationLevelDescription =
    conversation?.conversationMembership?.notificationLevelDescription
  const archived = isArchivedConversation(conversation)
  const canUpdate = conversation.memberAbility?.canUpdate || false
  const canSaveTitle = canUpdate && !emptyTitle
  const canDelete = conversation.memberAbility?.canDelete || false
  const canArchive = manualArchivingEnabled && (conversation.memberAbility?.canArchive || false)
  const isLeader = conversation.memberAbility?.leader || false
  const isDisabled = conversation.disabled ?? false
  const showAdultRequirementNotice = isDisabled && conversation.disabledReason === 'safety_check'

  const {
    data: members,
    fetchNextPage: fetchNextPageOfMembers,
    isFetchingNextPage: isLoadingMembers,
  } = useSuspensePaginator<MemberResource>({
    url: `/me/conversations/${route.params.conversation_id}/members`,
    data: {
      include: ['person'],
      fields: {
        Member: ['avatar', 'name', 'first_name', 'last_name', 'child', 'badges'],
      },
    },
  })

  const memberSectionStyleMap = {
    first: styles.sectionInnerFirstMember,
    middle: styles.sectionInnerMiddleMiddle,
    last: styles.sectionInnerLastMember,
  }

  const memberItems = members.map((data, index) => {
    const isFirst = index === 0
    const isLast = index === members.length - 1
    const memberPosition = isFirst ? 'first' : isLast ? 'last' : 'middle'
    const memberSectionStyle = memberSectionStyleMap[memberPosition]

    return {
      type: SectionTypes.members,
      data,
      sectionInnerStyle: memberSectionStyle,
    }
  })

  const loadingMemberItems = isLoadingMembers
    ? [
        {
          type: SectionTypes.loadingMembers,
          data: {},
          sectionInnerStyle: styles.sectionInnerFirstMember,
        },
      ]
    : []

  const childMembers = members.filter(member => member.child)
  const hasChildren = childMembers.length > 0

  const teamsGroup =
    conversation.groups
      ?.filter(g => g.sourceAppName === 'Services')
      ?.filter(g => ['Team', 'PlanTeam'].includes(g.sourceType))
      ?.filter(g => g.name !== null) || []
  const hasTeams = teamsGroup.length > 0

  const badge = conversation.badges?.[0]
  const resourceType = badge?.pcoResourceType || ''
  const productName = badge?.appName
  const name = badge?.text || undefined

  const handleDelete = useCallback(() => {
    Alert.alert(
      'Delete conversation',
      `All messages in ${title} will be deleted for everyone. This action cannot be undone.`,
      [
        {
          text: 'Cancel',
          style: 'cancel',
        },
        {
          text: 'Delete',
          style: 'destructive',
          onPress: () => {
            deleteConversation()
            navigation.dispatch(StackActions.popToTop())
          },
        },
      ]
    )
  }, [deleteConversation, navigation, title])

  const handleArchive = useCallback(() => {
    Alert.alert(
      'Archive conversation',
      'This conversation will be archived for everyone. Only its leaders and creator can open and unarchive it.',
      [
        {
          text: 'Cancel',
          style: 'cancel',
        },
        {
          text: 'Archive',
          onPress: () => setArchived(true),
        },
      ]
    )
  }, [setArchived])

  const HeaderTitle = useCallback(
    (props: HeaderTitleProps) => {
      return (
        <View style={styles.headerTitleContainer}>
          <ElementsHeaderTitle maxFontSizeMultiplier={1} {...props} />
          <Badge
            variant="metaSubtle"
            label={resourceType}
            metaLabel={name}
            style={styles.headerTitleBadge}
            productLogoName={productName}
            maxFontSizeMultiplier={1}
          />
        </View>
      )
    },
    [name, productName, resourceType, styles.headerTitleBadge, styles.headerTitleContainer]
  )

  useHeaderRight({
    icon: 'general.check',
    accessibilityLabel: 'Done',
    onPress: () => {
      if (canSaveTitle) saveTitle({ title: trimmedTitle })
      navigation.goBack()
    },
  })

  useEffect(() => {
    navigation.setOptions({ headerTitle: HeaderTitle })
  }, [HeaderTitle, navigation])

  const listData = [
    {
      type: canUpdate && customAvatarsEnabled ? SectionTypes.view : SectionTypes.hidden,
      data: {
        children: (
          <AvatarCard
            conversation={conversation}
            onPress={() => navigation.navigate('AvatarPicker', { conversation_id })}
          />
        ),
      },
      sectionOuterStyle: styles.sectionOuterAvatarCard,
      sectionInnerStyle: styles.sectionInnerAvatarCard,
    },
    {
      type: SectionTypes.header,
      data: { title: 'Basic info' },
      showBottomBorder: true,
      sectionInnerStyle: styles.sectionInnerHeaderWithBottomBorder,
    },
    {
      type: SectionTypes.view,
      data: {
        children: (
          <TitleInput
            canUpdate={canUpdate}
            title={title}
            setTitle={setTitle}
            isEmpty={emptyTitle}
          />
        ),
      },
      sectionInnerStyle: styles.sectionInnerTitleInput,
    },
    {
      type: SectionTypes.header,
      data: { title: 'Settings' },
      showBottomBorder: true,
      sectionInnerStyle: styles.sectionInnerHeaderWithBottomBorder,
    },
    archived
      ? {
          type: SectionTypes.view,
          data: {
            children: (
              <>
                <Text variant="tertiary">{archivedConversationMessage(conversation)}</Text>
                {unarchiveAction && (
                  <Button
                    variant="fill"
                    size="lg"
                    title={unarchiveAction.label}
                    onPress={unarchiveAction.onPress}
                    loading={unarchiveAction.loading}
                    style={styles.unarchiveButton}
                  />
                )}
              </>
            ),
          },
          showBottomBorder: true,
        }
      : granularNotificationsEnabled
        ? {
            type: SectionTypes.navigableSetting,
            data: {
              title: 'Notifications',
              subtitle: notificationLevelDescription,
              onPress: () =>
                navigation.navigate('ConversationNotificationLevelSelect', { conversation_id }),
            },
            showBottomBorder: true,
          }
        : {
            type: SectionTypes.setting,
            data: {
              title: 'Mute',
              rightItem: <Switch value={muted} onValueChange={value => setMuted(value)} />,
            },
            showBottomBorder: true,
          },
    {
      type: canUpdate ? SectionTypes.setting : SectionTypes.hidden,
      data: {
        title: 'Only leaders can message',
        rightItem: (
          <Switch value={repliesDisabled} onChange={() => setRepliesDisabled(!repliesDisabled)} />
        ),
      },
      showBottomBorder: true,
    },
    {
      type: canArchive ? SectionTypes.setting : SectionTypes.hidden,
      data: {
        title: 'Archive conversation…',
        disabled: isArchiving,
        onPress: handleArchive,
      },
      showBottomBorder: canDelete,
    },
    {
      type: canDelete ? SectionTypes.setting : SectionTypes.hidden,
      data: {
        title: 'Delete conversation…',
        buttonTextStyle: styles.deleteButtonText,
        appearance: 'danger',
        onPress: handleDelete,
      },
    },
    {
      type: hasTeams ? SectionTypes.header : SectionTypes.hidden,
      data: { title: 'Teams' },
      sectionInnerStyle: styles.sectionInnerHeader,
    },
    {
      type: hasTeams ? SectionTypes.view : SectionTypes.hidden,
      data: {
        children: <TeamsGroup teams={teamsGroup} />,
      },
    },
    {
      type: SectionTypes.header,
      data: {
        title: 'People',
        badge: showGenderFilter ? <Badge label={`${genderLabel}-only`} /> : undefined,
      },
      sectionInnerStyle: styles.sectionInnerHeader,
    },
    {
      type: showGenderFilter ? SectionTypes.view : SectionTypes.hidden,
      data: {
        children: (
          <Text variant="tertiary">
            This conversation will be automatically updated if any {genderLabel.toLowerCase()} are
            added or removed from this group.
          </Text>
        ),
      },
      sectionInnerStyle: styles.sectionInnerGenderNotice,
    },
    {
      type: showAdultRequirementNotice ? SectionTypes.view : SectionTypes.hidden,
      data: {
        children: <AdultRequirementNotice />,
      },
      sectionInnerStyle: styles.sectionInnerNotice,
    },
    {
      type: hasChildren && isLeader ? SectionTypes.view : SectionTypes.hidden,
      data: {
        children: <ChildNotice childMembers={childMembers} />,
      },
      sectionInnerStyle: styles.sectionInnerNotice,
    },
    ...memberItems,
    ...loadingMemberItems,
  ].filter(item => item.type !== SectionTypes.hidden)

  const headerIndices = listData
    .map(({ type }, index) => (type === SectionTypes.header ? index : undefined))
    .filter(isDefined)

  return (
    <View style={styles.listContainer}>
      <FlatList
        data={listData as SectionListData}
        contentContainerStyle={styles.contentContainer}
        renderItem={({ item, index }) => {
          const [isStart, isEnd] = [
            index === 0 || headerIndices.includes(index),
            index === listData.length - 1 || headerIndices.includes(index + 1),
          ]

          switch (item.type) {
            case SectionTypes.header:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  {item.data.badge ? (
                    <View style={styles.sectionHeaderRow}>
                      <Heading variant="h3">{item.data.title}</Heading>
                      {item.data.badge}
                    </View>
                  ) : (
                    <Heading variant="h3">{item.data.title}</Heading>
                  )}
                </ListSection>
              )
            case SectionTypes.members:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  <Person person={{ ...item.data }} />
                </ListSection>
              )
            case SectionTypes.loadingMembers:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  <Text>Loading more...</Text>
                </ListSection>
              )
            case SectionTypes.navigableSetting:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  <NavigableSettingRow {...item.data} />
                </ListSection>
              )
            case SectionTypes.setting:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  <SettingRow {...item.data} />
                </ListSection>
              )
            case SectionTypes.view:
              return (
                <ListSection
                  isStart={isStart}
                  isEnd={isEnd}
                  showBottomBorder={item?.showBottomBorder}
                  outerStyle={item?.sectionOuterStyle}
                  innerStyle={item?.sectionInnerStyle}
                >
                  <View {...item.data} style={item.data.style} />
                </ListSection>
              )
            default:
              return null
          }
        }}
        onEndReached={() => fetchNextPageOfMembers()}
      />
    </View>
  )
}

interface ListSectionProps {
  isStart?: boolean
  isEnd?: boolean
  showBottomBorder?: boolean
  outerStyle?: ViewStyle
  innerStyle?: ViewStyle
  children: ReactNode
}

function ListSection({
  isStart,
  isEnd,
  showBottomBorder,
  outerStyle,
  innerStyle,
  children,
}: ListSectionProps) {
  const styles = useStyles({ isStart, isEnd })
  const bottomBorder = showBottomBorder ? styles.sectionInnerBottomBorder : {}

  return (
    <View style={[styles.sectionOuterBase, outerStyle]}>
      <View style={[styles.sectionInnerBase, bottomBorder, innerStyle]}>{children}</View>
    </View>
  )
}

interface InputProps {
  canUpdate: boolean
  title: string
  setTitle: Dispatch<SetStateAction<string>>
  style?: ViewStyle
  isEmpty: boolean
}

function TitleInput({ canUpdate, title, setTitle, style, isEmpty }: InputProps) {
  const styles = useStyles()
  const textRef = useRef<TextInput>(null)

  const handleFocus = () => {
    if (textRef.current) {
      textRef.current.focus()
    }
  }

  return (
    <Pressable style={[styles.titleContainer, style]} onPress={() => handleFocus()}>
      <View style={styles.titleLabelContainer}>
        <Text variant="tertiary" style={styles.titleLabel}>
          Title
        </Text>
        {!canUpdate && <Icon name="general.lock" style={styles.titleDisabledIcon} />}
      </View>
      <TextInput
        ref={textRef}
        editable={canUpdate}
        onChangeText={setTitle}
        style={[styles.titleInput, !canUpdate && styles.titleInputDisabled]}
        value={title}
        multiline
        maxLength={255} // Matches Chat Web
        enterKeyHint="done"
        submitBehavior="blurAndSubmit"
      />
      {isEmpty && (
        <View style={styles.inputValidationContainer}>
          <Text variant="footnote" style={styles.inputValidationText}>
            A title is required for your conversation.
          </Text>
        </View>
      )}
    </Pressable>
  )
}

interface NavigableSettingRowProps {
  title: string
  subtitle?: string
  onPress: () => void
}

interface SettingRowProps {
  title: string
  style?: ViewStyle
  rightItem?: ReactNode
  titleStyle?: TextStyle
  buttonTextStyle?: TextStyle
  subtitle?: string
  rightItemStyle?: ViewStyle
  appearance?: ButtonAppearanceUnion
  disabled?: boolean
  onPress?: () => void
}

function SettingRow({
  title,
  style,
  titleStyle = {},
  buttonTextStyle = {},
  subtitle,
  rightItem,
  rightItemStyle = {},
  appearance,
  disabled,
  onPress,
}: SettingRowProps) {
  const styles = useStyles()

  if (onPress) {
    return (
      <TextButton
        style={[styles.settingRow, style]}
        textStyle={buttonTextStyle}
        appearance={appearance}
        disabled={disabled}
        onPress={onPress}
      >
        {title}
      </TextButton>
    )
  }

  return (
    <View style={[styles.settingRow, style]}>
      <View style={styles.settingRowContent}>
        <Text variant="plain" style={[styles.settingRowText, titleStyle]}>
          {title}
        </Text>
        {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
      </View>
      {Boolean(rightItem) && <View style={rightItemStyle}>{rightItem}</View>}
    </View>
  )
}

function NavigableSettingRow({ title, subtitle, onPress }: NavigableSettingRowProps) {
  const styles = useStyles()
  return (
    <PlatformPressable onPress={onPress} accessibilityRole="button">
      <View style={styles.settingRow}>
        <View style={styles.settingRowContent}>
          <Text variant="plain" style={styles.settingRowText}>
            {title}
          </Text>
          {Boolean(subtitle) && <Text variant="footnote">{subtitle}</Text>}
        </View>
        {Platform.OS === 'ios' && (
          <Icon
            name="general.rightChevron"
            size={16}
            style={styles.navigableSettingChevron}
            accessibilityElementsHidden
          />
        )}
      </View>
    </PlatformPressable>
  )
}

function AvatarCard({
  conversation,
  onPress,
}: {
  conversation: ConversationResource
  onPress: () => void
}) {
  const styles = useStyles()
  const diameter = usePreviewAvatarDiameter()

  return (
    <View style={styles.avatarCard}>
      <ConversationAvatar
        conversation={conversation}
        size="2xl"
        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
        style={{ width: diameter, height: diameter }}
      />
      <Button
        title="Update avatar"
        iconNameLeft="general.pencil"
        onPress={onPress}
        variant="outline"
        appearance="interaction"
        size="sm"
        maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
      />
    </View>
  )
}

function TeamsGroup({ teams }: { teams: GroupResource[] }) {
  const styles = useStyles()

  if (teams.length === 0) return null

  return (
    <View style={styles.teamGroup}>
      {teams.map((team, index) => (
        <Badge key={index} label={team.name as string} />
      ))}
    </View>
  )
}

// =================================
// ====== Styles ===================
// =================================

const useStyles = ({ isStart, isEnd }: { isStart?: boolean; isEnd?: boolean } = {}) => {
  const { colors } = useTheme()
  const headerBottomPadding = 4
  const sectionBorderRadius = 8

  return StyleSheet.create({
    listContainer: {
      flex: 1,
      backgroundColor: colors.surfaceColor080,
    },
    contentContainer: {
      padding: 16,
    },
    sectionOuterBase: {
      paddingLeft: 16,
      backgroundColor: colors.surfaceColor100,
      borderTopLeftRadius: isStart ? sectionBorderRadius : 0,
      borderTopRightRadius: isStart ? sectionBorderRadius : 0,
      borderBottomLeftRadius: isEnd ? sectionBorderRadius : 0,
      borderBottomRightRadius: isEnd ? sectionBorderRadius : 0,
      marginBottom: isEnd ? 16 : 0,
    },
    sectionInnerBase: {
      paddingRight: 16,
      paddingTop: isStart ? 16 : 12,
      paddingBottom: isEnd ? 16 : 12,
    },
    sectionInnerHeader: {
      paddingBottom: headerBottomPadding,
    },
    sectionInnerGenderNotice: {
      paddingTop: 0,
      paddingBottom: headerBottomPadding,
    },
    sectionHeaderRow: {
      flexDirection: 'row' as const,
      alignItems: 'center' as const,
      gap: 8,
    },
    sectionInnerHeaderWithBottomBorder: {
      paddingBottom: 16,
    },
    sectionInnerBottomBorder: {
      borderBottomColor: colors.borderColorDefaultBase,
      borderBottomWidth: isEnd ? 0 : 1,
    },
    sectionInnerTitleInput: {
      paddingTop: 12, // paddingVertical doesn't override the sectionInner padding
      paddingBottom: 12,
    },
    sectionInnerNotice: {
      paddingBottom: headerBottomPadding,
    },
    sectionInnerMiddleMiddle: {
      paddingTop: 0,
      paddingBottom: 12,
    },
    sectionInnerFirstMember: {
      paddingTop: 12,
      paddingBottom: 12,
    },
    sectionInnerLastMember: {
      paddingTop: 0,
      paddingBottom: 16,
    },
    titleContainer: {
      gap: 4,
    },
    titleLabelContainer: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 4,
    },
    titleLabel: {
      color: colors.textColorDefaultSecondary,
    },
    titleDisabledIcon: {
      color: colors.iconColorDefaultSecondary,
    },
    titleInput: {
      color: colors.textColorDefaultPrimary,
      fontSize: tokens.fontSizeMd,
    },
    titleInputDisabled: {
      color: colors.textColorDefaultSecondary,
    },
    inputValidationContainer: {
      paddingTop: 8,
      borderTopWidth: 1,
      borderColor: colors.statusErrorBorder,
    },
    inputValidationText: {
      color: colors.statusErrorText,
    },
    settingRow: {
      flexDirection: 'row',
      justifyContent: 'space-between',
      alignItems: 'center',
      gap: 8,
    },
    settingRowContent: {
      flex: 1,
    },
    deleteButtonText: {
      fontWeight: 'normal',
    },
    unarchiveButton: {
      marginTop: 12,
    },
    settingRowText: {
      lineHeight: 20,
    },
    navigableSettingChevron: {
      color: colors.iconColorDefaultDisabled,
    },
    avatarCard: {
      alignItems: 'center',
      gap: 16,
    },
    sectionOuterAvatarCard: {
      paddingLeft: 0,
    },
    sectionInnerAvatarCard: {
      paddingTop: 24,
      paddingBottom: 24,
      paddingHorizontal: 16,
      alignItems: 'center',
    },
    teamGroup: {
      flexDirection: 'row',
      gap: 4,
      flexWrap: 'wrap',
    },
    headerTitleBadge: {
      alignSelf: Platform.select({ android: 'flex-start', default: 'center' }),
      marginTop: 2,
    },
    headerTitleContainer: {
      alignItems: Platform.select({ android: 'flex-start', default: 'center' }),
    },
  })
}