import { FC, useCallback } from "react"
import { TextStyle, ViewStyle } from "react-native"

import { ListItem } from "@/components/ListItem"
import { Screen } from "@/components/Screen"
import { translate } from "@/i18n/translate"
import { AppStackScreenProps } from "@/navigators/navigationTypes"
import { useAppTheme } from "@/theme/context"
import { $styles } from "@/theme/styles"
import type { ThemedStyle } from "@/theme/types"
import { useHeader } from "@/utils/useHeader"

export const SecurityScreen: FC<AppStackScreenProps<"Security">> = function SecurityScreen({
  navigation,
}) {
  const { themed, theme } = useAppTheme()

  const navigateToChangePassword = useCallback(() => {
    navigation.navigate("ChangePassword")
  }, [navigation])

  const navigateToChangeEmail = useCallback(() => {
    navigation.navigate("ChangeEmail")
  }, [navigation])

  const navigateToSessionManagement = useCallback(() => {
    navigation.navigate("SessionManagement")
  }, [navigation])

  useHeader(
    {
      title: translate("securityScreen:title"),
      leftIcon: "back",
      onLeftPress: () => navigation.goBack(),
    },
    [],
  )

  return (
    <Screen
      preset="scroll"
      safeAreaEdges={["bottom"]}
      contentContainerStyle={[$styles.container, themed($container)]}
    >
      <ListItem
        tx="securityScreen:changePassword"
        textStyle={themed($listItemText)}
        leftIcon="lock"
        leftIconColor={theme.colors.tint}
        rightIcon="caretRight"
        onPress={navigateToChangePassword}
      />

      <ListItem
        tx="securityScreen:changeEmail"
        textStyle={themed($listItemText)}
        leftIcon="mail"
        leftIconColor={theme.colors.tint}
        rightIcon="caretRight"
        onPress={navigateToChangeEmail}
      />

      <ListItem
        tx="securityScreen:activeSessions"
        textStyle={themed($listItemText)}
        leftIcon="smartphone"
        leftIconColor={theme.colors.tint}
        rightIcon="caretRight"
        onPress={navigateToSessionManagement}
      />
    </Screen>
  )
}

const $container: ThemedStyle<ViewStyle> = ({ spacing }) => ({
  paddingTop: spacing.lg,
})

const $listItemText: ThemedStyle<TextStyle> = () => ({
  // Default styling
})