import Feather from '@expo/vector-icons/Feather'
import { Image } from 'expo-image'
import { Dimensions } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import VideoThumb from 'src/components/common/VideoThumb'
import type { Captured } from 'src/hooks/useStoryCompose'
import { Button, Text, useTheme, View, XStack } from 'tamagui'

type Props = {
  captured: Captured
  onRetake: () => void
  onPublish: () => void
}

export function StoryPreviewView({ captured, onRetake, onPublish }: Props) {
  const theme = useTheme()
  const insets = useSafeAreaInsets()
  return (
    <View
      flex={1}
      backgroundColor="#000"
      paddingTop={insets.top}
      paddingBottom={insets.bottom}
    >
      <View flex={1}>
        <View flex={1} alignItems="center" justifyContent="center">
          {captured.type === 'video' ? (
            <VideoThumb
              uri={captured.uri}
              width={Dimensions.get('window').width}
              height={Dimensions.get('window').height * 0.75}
              borderRadius={0}
            />
          ) : (
            <Image
              source={{ uri: captured.uri }}
              style={{ width: '100%', height: '100%' }}
              contentFit="contain"
            />
          )}
        </View>
        <XStack p="$4" gap="$3" justifyContent="space-between">
          <Button size="$4" chromeless onPress={onRetake}>
            <XStack alignItems="center" gap="$2">
              <Feather name="x" size={18} color="white" />
              <Text color="white">Retake</Text>
            </XStack>
          </Button>
          <Button
            size="$4"
            backgroundColor={theme.interactiveActive.val}
            onPress={onPublish}
          >
            <XStack alignItems="center" gap="$2">
              <Text color="white" fontWeight="700">
                Share to story
              </Text>
              <Feather name="send" size={16} color="white" />
            </XStack>
          </Button>
        </XStack>
      </View>
    </View>
  )
}
