import { PlatformPressable } from '@react-navigation/elements'
import { StaticScreenProps } from '@react-navigation/native'
import { useMutation } from '@tanstack/react-query'
import React, { type PropsWithChildren } from 'react'
import { Image, StyleSheet, View, type ViewStyle } from 'react-native'
import { Heading, Icon, Text } from '../components'
import { useApiClient, useTheme } from '../hooks'
import { useAppName } from '../hooks/use_app_name'
import { chatTypeLabel } from '../utils'
import { throwResponseError } from '../utils/response_error'
import { PreferredApp, useChatTypes } from './preferred_app/hooks/use_chat_types'

export type PreferredAppSelectionScreenProps = StaticScreenProps<{
  chatTypeId: number | string
  conversationType?: 'group' | 'team'
  currentSelection?: PreferredApp
}>

export function PreferredAppSelectionScreen({ route }: PreferredAppSelectionScreenProps) {
  const { chatTypeId } = route.params
  const { data: chatTypes, refetch: refetchChatTypes } = useChatTypes()
  const appName = useAppName()

  const apiClient = useApiClient()

  const { mutate: updateChatType } = useMutation({
    throwOnError: true,
    onSuccess: () => refetchChatTypes(),
    mutationFn: (app: PreferredApp) => {
      return apiClient.chat
        .post({
          url: `/me/chat_types/${chatTypeId}/set_preferred_app`,
          data: { data: { type: 'ChatType', attributes: { app } } },
        })
        .catch(throwResponseError)
    },
  })
  const chatType = chatTypes.find(t => t.id === chatTypeId)
  const { preferredAppOptions } = chatType || {}

  const handleSelection = (app: PreferredApp) => {
    updateChatType(app)
  }

  const sectionTitle = chatType ? chatTypeLabel(chatType.title) : undefined

  return (
    <View style={styles.container}>
      <View style={styles.section}>
        <Heading variant="h2" style={styles.sectionHeading}>
          {sectionTitle}
        </Heading>
        {preferredAppOptions?.sort(sortPreferredApp('asc')).map((option, key) => (
          <PressableRow
            key={`${key}-${option}`}
            isActive={chatType?.preferredApp === option}
            onPress={() => handleSelection(option)}
          >
            <Image source={getAppImage(option)} style={styles.logo} />
            <Text>
              {option}
              {appName.includes(option.replace(/\s/, '').toLowerCase()) ? ' ( current )' : ''}
            </Text>
          </PressableRow>
        ))}
      </View>
    </View>
  )
}

const sortPreferredApp = (dir?: 'asc' | 'desc') => (a: PreferredApp, b: PreferredApp) => {
  if (a === 'None') return 1
  if (a > b) return dir === 'asc' ? 1 : -1
  if (b > a) return dir === 'asc' ? -1 : 1

  return 0
}

const getAppImage = (option: PreferredApp) => {
  switch (option) {
    case 'Church Center':
      return require('../../assets/churchCenter.png')
    case 'Services':
      return require('../../assets/servicesApp.png')
    case 'Chat':
      return require('../../assets/chatLogo.png')
    default:
      return undefined
  }
}

const PressableRow = ({
  children,
  isActive,
  onPress,
  style,
}: PropsWithChildren<{ isActive: boolean; onPress: () => void; style?: ViewStyle }>) => {
  const styles = useRowStyles({ isActive })
  return (
    <PlatformPressable
      style={styles.pressable}
      onPress={onPress}
      accessibilityRole="radio"
      accessibilityState={{ selected: isActive }}
    >
      <View style={styles.row}>
        <View style={[styles.rowInner, style]}>{children}</View>
        <Icon
          name="general.check"
          style={styles.rowIconRight}
          accessibilityElementsHidden
          maxFontSizeMultiplier={2.5}
        />
      </View>
    </PlatformPressable>
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  section: {
    paddingTop: 24,
  },
  sectionHeading: {
    paddingHorizontal: 16,
    paddingBottom: 4,
  },
  logo: {
    width: 32,
    height: 32,
    borderRadius: 8,
  },
})

const useRowStyles = ({ isActive = false }: { isActive?: boolean } = {}) => {
  const theme = useTheme()

  return StyleSheet.create({
    pressable: {
      paddingLeft: 16,
      backgroundColor: theme.colors.surfaceColor100,
    },
    row: {
      flexDirection: 'row',
      alignItems: 'center',
      justifyContent: 'space-between',
      gap: 12,
      borderBottomWidth: 1,
      borderBottomColor: theme.colors.borderColorDefaultBase,
      paddingVertical: 12,
      paddingRight: 16,
    },
    rowInner: {
      flexDirection: 'row',
      alignItems: 'center',
      gap: 12,
      flexShrink: 1,
    },
    rowIconRight: {
      fontSize: 16,
      color: theme.colors.statusSuccessIcon,
      opacity: isActive ? 1 : 0,
    },
  })
}