import type {FunctionComponent} from 'react'
import {Modal, StyleSheet, View} from 'react-native'
import type {PhotoFile} from 'react-native-vision-camera'
import {Camera} from 'react-native-vision-camera'
import {Button, ButtonIcon, ButtonText} from '@/components/ui/button'
import {SwitchCamera, X} from 'lucide-react-native'
import {
  AlertDialog,
  AlertDialogBackdrop,
  AlertDialogBody,
  AlertDialogContent,
  AlertDialogFooter,
  AlertDialogHeader,
} from '@/components/ui/alert-dialog'
import {Text} from '@/components/ui/text'
import {Heading} from '@/components/ui/heading'

interface NoPermissionDialogProps {
  onCancel?: () => void
  isOpen?: boolean
}

const NoPermissionDialog: FunctionComponent<NoPermissionDialogProps> = ({onCancel, isOpen}) => {
  return (
    <AlertDialog isOpen={isOpen} size="md">
      <AlertDialogBackdrop />
      <AlertDialogContent>
        <AlertDialogHeader>
          <Heading className="text-typography-950 font-semibold" size="md">
            No permission to use camera
          </Heading>
        </AlertDialogHeader>
        <AlertDialogBody className="mt-3 mb-4">
          <Text size="sm">
            We need to be granted permission to use the camera, otherwise the app is unable to function. Please grant us
            permission and try again.
          </Text>
        </AlertDialogBody>
        <AlertDialogFooter className="">
          <Button variant="outline" action="secondary" onPress={onCancel} size="sm">
            <ButtonText>Cancel</ButtonText>
          </Button>
          {/*Via Linking.openSettings kan de gebruiker naar de instellingen van de app gaan om de rechten aan te passen.*/}
          {/*Dit is een standaard functie die door het React Native voorzien wordt, er zijn dus geen extra libraries nodig.*/}
          <Button size="sm" onPress={() => {}}>
            <ButtonText>Grant</ButtonText>
          </Button>
        </AlertDialogFooter>
      </AlertDialogContent>
    </AlertDialog>
  )
}

interface CameraUIProps {
  showCamera: boolean
  cameraType: 'front' | 'back'
  onClose: (photo: PhotoFile | undefined) => void
}

const CameraUI: FunctionComponent<CameraUIProps> = ({showCamera, cameraType, onClose}) => {
  return (
    <Modal>
      <View className="flex items-center justify-end h-full">
        <Camera isActive={showCamera} style={styles.absoluteFill} photo />
        <Button size="lg" className="rounded-full p-3.5 h-14 w-14 absolute right-8 top-16">
          <ButtonIcon as={X} size="xl" />
        </Button>

        <Button size="lg" className="rounded-full p-3.5 h-14 w-14 absolute right-8 bottom-16">
          <ButtonIcon as={SwitchCamera} size="xl" />
        </Button>

        <Button
          variant="outline"
          android_ripple={{color: 'rgba(255,255,255,0.4)', borderless: false, radius: 35}}
          className="border-2 border-neutral-800 rounded-full h-24 w-24 absolute bottom-8 opacity-50 bg-neutral-700 data-[active=true]:bg-neutral-400"
        />
      </View>
    </Modal>
  )
}

const styles = StyleSheet.create({
  absoluteFill: {
    position: 'absolute',
    top: 0,
    left: 0,
    width: '100%',
    height: '100%',
    zIndex: -1,
  },
})

export default CameraUI
