import { XStack, YStack } from 'tamagui'
import { SignOutModalProps } from './types'
import { H5, Text } from '../../components/Global/helpers/text'
import Button from '../../components/Global/helpers/button'
import Icon from '../../components/Global/components/icon'
import { useResetQueue } from '../../providers/Player/hooks/mutations'
import { useClearAllDownloads } from '../../api/mutations/download'
import { useJellifyServer } from '../../stores'
import { useNavigation } from '@react-navigation/native'
import { RootStackParamList } from '../types'
import { NativeStackNavigationProp } from '@react-navigation/native-stack'

export default function SignOutModal({ navigation }: SignOutModalProps): React.JSX.Element {
	const [server] = useJellifyServer()

	const rootNavigation = useNavigation<NativeStackNavigationProp<RootStackParamList>>()

	const { mutate: resetQueue } = useResetQueue()
	const clearDownloads = useClearAllDownloads()

	return (
		<YStack margin={'$6'}>
			<H5>{`Sign out of ${server?.name ?? 'Jellyfin'}?`}</H5>
			<XStack gap={'$2'}>
				<Button
					icon={() => <Icon name='chevron-left' small color={'$borderColor'} />}
					borderWidth={'$1'}
					borderColor={'$borderColor'}
					flex={1}
					onPress={() => {
						navigation.goBack()
					}}
				>
					<Text bold color={'$borderColor'}>
						Cancel
					</Text>
				</Button>
				<Button
					testID='sign-out-button'
					flex={1}
					icon={() => <Icon name='logout' small color={'$danger'} />}
					color={'$danger'}
					borderColor={'$danger'}
					onPress={() => {
						navigation.goBack()
						rootNavigation.navigate('Login', { screen: 'ServerAddress' })

						clearDownloads()
						resetQueue()
					}}
				>
					<Text bold color={'$danger'}>
						Sign out
					</Text>
				</Button>
			</XStack>
		</YStack>
	)
}
