import { HeaderBackButton, useHeaderHeight } from '@react-navigation/elements'
import * as ReactNavigationNative from '@react-navigation/native'
import { RouteProp, useNavigation, useRoute } from '@react-navigation/native'
import { createNativeStackNavigator } from '@react-navigation/native-stack'
import React, { useCallback } from 'react'
import { LayoutChangeEvent, Platform, StyleSheet, useWindowDimensions, View } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import FormSheet, { getFormSheetScreenOptions } from '../components/primitive/form_sheet'
import { useTheme } from '../hooks'
import { useFilterDropdownEnabled } from '../hooks/use_filter_dropdown_enabled'
import { ConversationFilters } from './conversation_filters/components/conversation_filters'
import {
  FilterProvider,
  useFilterContext,
} from './conversation_filters/context/conversation_filter_context'
import { GroupFilters } from './conversation_filters/group_filters'
import {
  ConversationFiltersScreenProps,
  ConversationFilterStackParamList,
} from './conversation_filters/screen_props'
import { TeamFilters } from './conversation_filters/team_filters'

export const ConversationFiltersScreenOptions = getFormSheetScreenOptions({
  presentation: Platform.select({ android: 'modal', ios: 'formSheet' }),
  sheetAllowedDetents: Platform.select({
    ios: [0.75, 1],
    default: [1],
  }),
  headerTitle: 'Filters',
})

const FilterNavigator = createNativeStackNavigator<ConversationFilterStackParamList>({
  initialRouteName: 'Filters',
  screens: {
    Filters: {
      screen: ConversationFilters,
      options: {
        headerShown: false,
      },
    },
    GroupFilters: {
      screen: GroupFilters,
      options: {
        headerTitle: Platform.select({
          android: 'Groups',
          ios: '',
        }),
        headerBackTitle: 'Groups',
      },
    },
    TeamFilters: {
      screen: TeamFilters,
      options: {
        headerTitle: Platform.select({
          android: 'Teams',
          ios: '',
        }),
        headerBackTitle: 'Teams',
      },
    },
  },
})

// tree.getComponent() doesn't exist on every host's installed
// react-navigation/core — hosts on an older version would throw here.
// Where it does exist, it's the real implementation (the "deprecated"
// createComponentForStaticNavigation is just a console.warn wrapper around
// the same call on current versions), so prefer it and only reach for the
// old function on cores where getComponent() genuinely isn't there yet.
function createStaticNavigationComponent<P extends object>(
  tree: { getComponent?: () => React.ComponentType<P> },
  name: string
): React.ComponentType<P> {
  if (typeof tree.getComponent === 'function') return tree.getComponent()

  const { createComponentForStaticNavigation } = ReactNavigationNative as {
    createComponentForStaticNavigation: (tree: unknown, name: string) => React.ComponentType<P>
  }

  return createComponentForStaticNavigation(tree, name)
}

const Filters = createStaticNavigationComponent(FilterNavigator, 'Filters')

export const ConversationFiltersScreen = (_props: ConversationFiltersScreenProps) => {
  const styles = useStyles()

  return (
    <FilterProvider>
      <FormSheet.Root contentStyle={styles.contentContainer} showAndroidSheetGrabber={false}>
        <ConversationFiltersHeader />
        <Filters />
      </FormSheet.Root>
    </FilterProvider>
  )
}

export const ConversationFiltersHeader = () => {
  const { resetFilter, applyFilters, setFormSheetHeaderHeight } = useFilterContext()
  const navigation = useNavigation()
  const route = useRoute<RouteProp<ConversationFiltersScreenProps['route']>>()
  const filterDropdownEnabled = useFilterDropdownEnabled()
  const { colors } = useTheme()
  const styles = useStyles()

  const handleFormSheetHeaderLayout = useCallback(
    (event: LayoutChangeEvent) => {
      setFormSheetHeaderHeight(event.nativeEvent.layout.height)
    },
    [setFormSheetHeaderHeight]
  )

  return (
    <View onLayout={handleFormSheetHeaderLayout}>
      <FormSheet.Header style={styles.header}>
        {Platform.OS === 'android' && (
          <HeaderBackButton
            displayMode="minimal"
            accessibilityLabel="Back"
            tintColor={colors.iconColorDefaultPrimary}
            onPress={navigation.goBack}
            style={styles.backButton}
          />
        )}
        <FormSheet.HeaderTitle>
          {filterDropdownEnabled ? 'More filters' : 'Filters'}
        </FormSheet.HeaderTitle>
        <FormSheet.HeaderActions>
          <FormSheet.HeaderTextButton onPress={resetFilter}>Reset</FormSheet.HeaderTextButton>
          <FormSheet.HeaderButton title="Apply" onPress={() => applyFilters(route.params)} />
        </FormSheet.HeaderActions>
      </FormSheet.Header>
    </View>
  )
}

const useStyles = () => {
  const { top } = useSafeAreaInsets()
  const { height } = useWindowDimensions()
  const headerHeight = useHeaderHeight()

  const containerHeight = Platform.select({
    android: height,
    ios: height - top - headerHeight,
  })

  return StyleSheet.create({
    contentContainer: {
      height: containerHeight,
    },
    header: {
      paddingTop: Platform.select({
        ios: 20,
        android: 20 + top,
      }),
      // The filter list scrolls under it, so the sheet header doesn't need a
      // separator the way the non-scrolling reaction sheet does.
      borderBottomWidth: 0,
    },
    backButton: {
      marginLeft: -3,
      marginRight: 8,
    },
  })
}