import { PlatformPressable, useHeaderHeight } from '@react-navigation/elements'
import { NativeStackNavigationOptions } from '@react-navigation/native-stack'
import React, { ReactNode } from 'react'
import {
  Platform,
  StyleSheet,
  View,
  useWindowDimensions,
  type AccessibilityRole,
  type StyleProp,
  type ViewStyle,
} from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { useTheme } from '../../hooks'
import { isLiquidGlassEnabled, MAX_FONT_SIZE_MULTIPLIER_LANDMARK } from '../../utils'
import type { ButtonProps, TextButtonProps } from '../display'
import { Button, Heading, Icon, IconString, Text, TextButton } from '../display'

// =================================
// ====== Exports ==================
// =================================

/**
 * Screen options for the formsheet's NativeStackNavigation route
 *
 * Returns a factory rather than an object because callers assign it at module
 * scope, which runs before ChatProvider reports the host's liquid glass
 * capability. React Navigation calls the factory per render, so the sheet
 * corner radius is resolved once that capability is known.
 *
 * @param {string} options.headerTitle - Doesn't show in UI but good to have for semantic reasons.
 * @param {number[]} [options.sheetAllowedDetents] - Controls the height increments the sheet grows to. To prevent bugs in Android, do not specify more then two values and use [0.94] instead of [1] to go full screen.
 * @param {NativeStackNavigationOptions} [options.rest] - Adds or overrides any valid NativeStackNavigationOptions
 * @returns {() => NativeStackNavigationOptions} Factory producing merged NativeStackNavigationOptions
 */
export const getFormSheetScreenOptions =
  ({ headerTitle, sheetAllowedDetents = [0.25], ...rest }: NativeStackNavigationOptions = {}) =>
  (): NativeStackNavigationOptions => ({
    presentation: 'formSheet',
    headerShown: false,
    sheetAllowedDetents,
    sheetCornerRadius: isLiquidGlassEnabled() ? undefined : 16,
    sheetGrabberVisible: true,
    headerTitle,
    ...rest,
  })

const FormSheet = {
  Root: FormSheetRoot,
  Action: FormSheetAction,
  Header: FormSheetHeader,
  HeaderTitle: FormSheetHeaderTitle,
  HeaderActions: FormSheetHeaderActions,
  HeaderTextButton: FormSheetHeaderTextButton,
  HeaderButton: FormSheetHeaderButton,
} as const

type FormSheetComponents = {
  Root: React.FC<FormSheetRootProps>
  Action: React.FC<FormSheetActionProps>
  Header: React.FC<FormSheetHeaderProps>
  HeaderTitle: React.FC<FormSheetHeaderTitleProps>
  HeaderActions: React.FC<FormSheetHeaderActionsProps>
  HeaderTextButton: React.FC<FormSheetHeaderTextButtonProps>
  HeaderButton: React.FC<FormSheetHeaderButtonProps>
}

export default FormSheet as FormSheetComponents
export type {
  FormSheetActionProps,
  FormSheetHeaderActionsProps,
  FormSheetHeaderButtonProps,
  FormSheetHeaderProps,
  FormSheetHeaderTextButtonProps,
  FormSheetHeaderTitleProps,
  FormSheetRootProps,
}

// ====================================
// ====== ActionsFormSheetRoot ========
// ====================================

interface FormSheetRootProps {
  children: ReactNode
  style?: StyleProp<ViewStyle>
  contentStyle?: StyleProp<ViewStyle>
  showAndroidSheetGrabber?: boolean
  fitToContents?: boolean
}

export function FormSheetRoot({
  children,
  style,
  contentStyle,
  showAndroidSheetGrabber = true,
  fitToContents = false,
}: FormSheetRootProps) {
  const styles = useStyles({ fitToContents })

  return (
    <View style={[styles.container, style]} collapsable={false}>
      <View style={[styles.content, contentStyle]}>{children}</View>
      {showAndroidSheetGrabber && <AndroidSheetGrabber />}
    </View>
  )
}

FormSheetRoot.displayName = 'FormSheet.Root'

// ====================================
// ====== AndroidSheetGrabber =========
// ====================================

function AndroidSheetGrabber() {
  const styles = useStyles()

  return Platform.select({
    android: <View style={styles.androidSheetGrabber} />,
    ios: null,
  })
}

// ====================================
// ====== FormSheetHeader =============
// ====================================

interface FormSheetHeaderProps {
  children: ReactNode
  style?: StyleProp<ViewStyle>
}

function FormSheetHeader({ children, style }: FormSheetHeaderProps) {
  const styles = useStyles()

  return (
    <View style={[styles.header, style]}>
      <View style={styles.headerContent}>{children}</View>
    </View>
  )
}

FormSheetHeader.displayName = 'FormSheet.Header'

// ====================================
// ====== FormSheetHeaderTitle ========
// ====================================

interface FormSheetHeaderTitleProps {
  children: ReactNode
}

function FormSheetHeaderTitle({ children }: FormSheetHeaderTitleProps) {
  const styles = useStyles()

  return (
    <Heading
      variant="h3"
      style={styles.headerTitle}
      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
    >
      {children}
    </Heading>
  )
}

FormSheetHeaderTitle.displayName = 'FormSheet.HeaderTitle'

// ====================================
// ====== FormSheetHeaderActions ======
// ====================================

interface FormSheetHeaderActionsProps {
  children: ReactNode
}

function FormSheetHeaderActions({ children }: FormSheetHeaderActionsProps) {
  const styles = useStyles()

  return <View style={styles.headerActions}>{children}</View>
}

FormSheetHeaderActions.displayName = 'FormSheet.HeaderActions'

// ===========================================
// ====== FormSheetHeaderTextButton ==========
// ===========================================

// We are omitting `onLongPress` because we are instead supporting `accessibilityShowsLargeContentViewer`.
// This is triggered by an `onLongPress` event when an iOS device is in Apple's accessible font scale range.
// Triggering this prop will display an almost full screen iOS a11y button.
interface FormSheetHeaderTextButtonProps
  extends Omit<TextButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {
  children: string
}

function FormSheetHeaderTextButton(props: FormSheetHeaderTextButtonProps) {
  return (
    <TextButton
      {...props}
      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
      accessibilityShowsLargeContentViewer
      accessibilityLargeContentTitle={props.children}
    />
  )
}

FormSheetHeaderTextButton.displayName = 'FormSheet.HeaderTextButton'

// =========================================
// ====== FormSheetHeaderButton ============
// =========================================

// Same `onLongPress`note as `FormSheetHeaderTextButtonProps`
interface FormSheetHeaderButtonProps
  extends Omit<ButtonProps, 'maxFontSizeMultiplier' | 'onLongPress'> {}

function FormSheetHeaderButton(props: FormSheetHeaderButtonProps) {
  return (
    <Button
      {...props}
      maxFontSizeMultiplier={MAX_FONT_SIZE_MULTIPLIER_LANDMARK}
      accessibilityShowsLargeContentViewer
      accessibilityLargeContentTitle={props.title}
    />
  )
}

FormSheetHeaderButton.displayName = 'FormSheet.HeaderButton'

// ====================================
// ====== ActionsFormSheetAction ======
// ====================================

const FORM_SHEET_ACTION_APPEARANCES = {
  neutral: 'neutral',
  danger: 'danger',
} as const

type FormSheetActionAppearanceUnion =
  (typeof FORM_SHEET_ACTION_APPEARANCES)[keyof typeof FORM_SHEET_ACTION_APPEARANCES]

interface FormSheetActionProps {
  title: string
  iconName?: IconString
  onPress: () => void
  accessibilityLabel?: string
  accessibilityHint?: string
  accessibilityRole?: AccessibilityRole
  appearance?: FormSheetActionAppearanceUnion
  disabled?: boolean
  disabledReason?: string
  testID?: string
}

function FormSheetAction({
  title,
  iconName,
  onPress,
  accessibilityLabel,
  accessibilityHint,
  accessibilityRole = 'button',
  appearance = 'neutral',
  disabled = false,
  disabledReason,
  testID,
}: FormSheetActionProps) {
  const styles = useStyles({ appearance, disabled })

  return (
    <PlatformPressable
      testID={testID}
      onPress={onPress}
      accessibilityLabel={accessibilityLabel}
      accessibilityHint={
        accessibilityHint ?? (disabled && disabledReason ? disabledReason : undefined)
      }
      accessibilityRole={accessibilityRole}
      style={styles.actionPressable}
      disabled={disabled}
    >
      {iconName && (
        <Icon name={iconName} size={16} accessibilityElementsHidden style={styles.actionIcon} />
      )}
      <View style={styles.actionTextBlock}>
        <Text style={styles.actionTitle}>{title}</Text>
        {disabled && disabledReason && (
          <Text style={styles.actionDisabledReason}>{disabledReason}</Text>
        )}
      </View>
    </PlatformPressable>
  )
}

FormSheetAction.displayName = 'FormSheet.Action'

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

interface Styles {
  appearance?: FormSheetActionAppearanceUnion
  disabled?: boolean
  fitToContents?: boolean
}

const useStyles = ({
  appearance = 'neutral',
  disabled = false,
  fitToContents = false,
}: Styles = {}) => {
  const { colors } = useTheme()
  const { height } = useWindowDimensions()
  const { bottom, top } = useSafeAreaInsets()
  const headerHeight = useHeaderHeight()

  const containerHeight = Platform.select({
    ios: fitToContents ? undefined : height - top - headerHeight,
    default: null,
  })

  const appearanceColorsMap = {
    neutral: {
      iconColor: colors.iconColorDefaultPrimary,
      textColor: colors.textColorDefaultPrimary,
    },
    danger: {
      iconColor: colors.fillColorStatusErrorMedium,
      textColor: colors.fillColorStatusErrorMedium,
    },
  }

  return StyleSheet.create({
    container: {
      justifyContent: 'flex-start',
      paddingBottom: bottom,
      width: '100%',
      backgroundColor: colors.fillColorNeutral100Inverted,
      height: containerHeight,
      ...Platform.select({
        ios: {
          flexGrow: 1, // Ensures the FormSheet children respond to the formsheet height changing on iOS
        },
        android: {
          maxHeight: '100%', // Ensures lists to scroll on Android
        },
      }),
    },
    androidSheetGrabber: {
      position: 'absolute',
      top: 5,
      width: 34,
      height: 5,
      backgroundColor: colors.fillColorNeutral040,
      borderRadius: 100,
      alignSelf: 'center',
    },
    content: {
      ...Platform.select({
        android: {
          maxHeight: '100%', // Ensures content above a list (e.g. FormSheet.Header) don't subtract from the FormSheet's height
        },
      }),
    },
    header: {
      paddingHorizontal: 16,
      paddingTop: 20,
      paddingBottom: 16,
      backgroundColor: colors.fillColorNeutral100Inverted,
      gap: 16,
      borderBottomWidth: 1,
      borderBottomColor: colors.borderColorDefaultBase,
    },
    headerContent: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
    },
    headerTitle: {
      textAlign: 'left',
      flex: 1,
    },
    headerActions: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 16,
    },
    actionPressable: {
      flexDirection: 'row',
      alignItems: 'center',
      paddingVertical: 12,
      paddingHorizontal: 16,
      gap: 8,
    },
    actionIcon: {
      color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].iconColor,
    },
    actionTextBlock: {
      flex: 1,
    },
    actionTitle: {
      color: disabled ? colors.textColorDefaultDisabled : appearanceColorsMap[appearance].textColor,
    },
    actionDisabledReason: {
      color: colors.textColorDefaultDisabled,
      fontSize: 12,
    },
  })
}