import Feather from '@expo/vector-icons/Feather'
import { type CameraType, CameraView, type FlashMode } from 'expo-camera'
import type { RefObject } from 'react'
import { Pressable, StyleSheet, View } from 'react-native'
import { GestureHandlerRootView } from 'react-native-gesture-handler'
import type { SharedValue } from 'react-native-reanimated'
import { useSafeAreaInsets } from 'react-native-safe-area-context'
import { ShutterButton } from 'src/components/story/ShutterButton'
import { Text, XStack, YStack } from 'tamagui'

type Props = {
  cameraRef: RefObject<CameraView | null>
  facing: CameraType
  flash: FlashMode
  isRecording: boolean
  ringProgress: SharedValue<number>
  onClose: () => void
  onToggleFlash: () => void
  onToggleFacing: () => void
  onPickFromLibrary: () => void
  onTakePhoto: () => void
  onStartRecording: () => void
  onStopRecording: () => void
}

export function StoryCaptureView({
  cameraRef,
  facing,
  flash,
  isRecording,
  ringProgress,
  onClose,
  onToggleFlash,
  onToggleFacing,
  onPickFromLibrary,
  onTakePhoto,
  onStartRecording,
  onStopRecording,
}: Props) {
  const insets = useSafeAreaInsets()
  return (
    <GestureHandlerRootView style={{ flex: 1, backgroundColor: '#000' }}>
      <CameraView
        ref={cameraRef}
        style={StyleSheet.absoluteFill}
        facing={facing}
        flash={flash}
        mode="video"
        videoQuality="720p"
      />
      <View
        style={{
          flex: 1,
          justifyContent: 'space-between',
          paddingTop: insets.top,
          paddingBottom: insets.bottom,
        }}
      >
        <XStack justifyContent="space-between" px="$4" pt="$2">
          <Pressable onPress={onClose} hitSlop={12}>
            <Feather name="x" size={26} color="white" />
          </Pressable>
          <XStack gap="$5">
            <Pressable onPress={onToggleFlash} hitSlop={10}>
              <Feather
                name={flash === 'off' ? 'zap-off' : 'zap'}
                size={22}
                color="white"
              />
            </Pressable>
            <Pressable onPress={onToggleFacing} hitSlop={10}>
              <Feather name="refresh-cw" size={22} color="white" />
            </Pressable>
          </XStack>
        </XStack>

        <XStack alignItems="center" justifyContent="space-around" pb="$4" px="$4">
          <Pressable onPress={onPickFromLibrary} hitSlop={12}>
            <YStack alignItems="center" gap="$1">
              <Feather name="image" size={26} color="white" />
              <Text color="white" fontSize="$1">
                Library
              </Text>
            </YStack>
          </Pressable>

          <ShutterButton
            onTap={onTakePhoto}
            onLongPressStart={onStartRecording}
            onLongPressEnd={onStopRecording}
            isRecording={isRecording}
            progress={ringProgress}
          />

          <YStack alignItems="center" gap="$1" width={60}>
            <Feather name="video" size={26} color="white" opacity={0.6} />
            <Text color="white" fontSize="$1" opacity={0.6}>
              Hold
            </Text>
          </YStack>
        </XStack>
      </View>
    </GestureHandlerRootView>
  )
}
