import React, { useCallback, useRef, useState } from 'react'
import { Button, StyleSheet, Text, View } from 'react-native'
import { Camera, useCameraPermission, useCameraDevice, useCameraFormat, PhotoFile, VideoFile, CameraRuntimeError, Orientation } from 'react-native-vision-camera'
import { RecordingButton } from './capture-button'
import { useIsForeground } from './is-foreground'

export default function CameraScreen(): React.ReactElement {
  const camera = useRef<Camera>(null)
  const { hasPermission, requestPermission } = useCameraPermission()
  const [isCameraInitialized, setIsCameraInitialized] = useState(false)

  const isForeground = useIsForeground()
  const isActive = isForeground

  const onError = useCallback((error: CameraRuntimeError) => {
    console.error(error)
  }, [])

  const onInitialized = useCallback(() => {
    console.log('Camera initialized!')
    setIsCameraInitialized(true)
  }, [])

  const onMediaCaptured = useCallback(
    (media: PhotoFile | VideoFile) => {
      console.log(`Media captured! ${JSON.stringify(media)}`)
    },
    [],
  )

  if (!hasPermission) {
    requestPermission()
    // Error handling in case they refuse to give permission
  }

  const device = useCameraDevice('back')
  const format = useCameraFormat(device, [
    { videoResolution: { width: 3048, height: 2160 } },
    { fps: 60 }
  ])

  //Orientation detection
  const [orientation, setOrientation] = useState<Orientation>('portrait');

  const toggleOrientation = () => {
    setOrientation(currentOrientation => 
      currentOrientation === 'landscape-left' ? 'portrait' : 'landscape-left' // Can adjust this and the type to match what we want
    );
  };

  if (device === null) {
    return <Text>Camera not available. Does user have permissions:  {hasPermission}</Text>
  }
  
  return (
    hasPermission && (
      <View style={styles.container}>
        <Camera
          ref={camera}
          style={StyleSheet.absoluteFill}
          device={device}
          format={format}
          onInitialized={onInitialized}
          onError={onError}
          video={true}
          orientation={orientation} // TODO: #60
          isActive={isActive}
        />
        <RecordingButton
          style={[styles.captureButton, orientation === 'portrait' ? styles.portrait : styles.landscape ]}
          camera={camera}
          onMediaCaptured={onMediaCaptured}
          enabled={isCameraInitialized}
        />
        <View style={[styles.button, orientation === 'portrait' ? styles.togglePortrait : styles.toggleLandscape ]}>
          <Button
            title="Toggle Orientation"
            onPress={toggleOrientation}
            color="#841584"
            accessibilityLabel="Toggle camera orientation"
          />
        </View>
      </View>
    )
  )
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'black',
  },
  captureButton: {
    position: 'absolute',
    alignSelf: 'center',
  },
  button: {
    position: 'absolute',
    alignSelf: 'center',
  },
  togglePortrait: {
    bottom: 110, // Adjust this as needed
  },
  toggleLandscape: {
    transform: [{ rotate: '90deg' }],
    bottom: '43%', // Should come from SafeAreaProvider, hardcoded right now, should roughly appear above the button
    left: 50 // needs refined
  },
  portrait: {
    bottom: 20
  },
  landscape: {
    bottom: '40%', // Should come from SafeAreaProvider
    left: 20 // needs refined
  }
})