import React, {useEffect, useState} from 'react';
import Config from 'react-native-config';
import {View, StyleSheet, Image} from 'react-native';
import {useNavigation} from '@react-navigation/native';
import {Camera, CameraPermissionStatus} from 'react-native-vision-camera';
import Permission from '@screens/scan/Permission';
import {QR_CODE, HOME} from '@constants/navigation/app-bottom-tab';
import Container from '@components/Container';
import {
  ComingSoonWrapper,
  ComingSoonTitle,
  ComingSoonSubTitle,
} from '@styles/screens/scan';

const Scan = () => {
  const screenEnabled = Config.ENABLE_SCAN_SCREEN === 'true';
  const navigation: any = useNavigation();
  const [permissionModal, setPermissionModal] = useState(false);

  useEffect(() => {
    if (screenEnabled) {
      const unsubscribe = navigation.addListener('focus', async () => {
        const cameraPermission: CameraPermissionStatus =
          await Camera.getCameraPermissionStatus();

        if (cameraPermission === 'authorized') {
          navigation.navigate(QR_CODE.SCREEN);
        } else {
          setPermissionModal(true);
        }
      });

      return unsubscribe;
    }
  }, [navigation, screenEnabled]);

  if (screenEnabled) {
    return (
      <Container header={{title: 'Scan', showBackButton: false}}>
        <View style={StyleSheet.absoluteFill}>
          {permissionModal && (
            <Permission
              open={permissionModal}
              deny={() => {
                setPermissionModal(false);
                navigation.navigate(HOME.SCREEN);
              }}
              allow={() => {
                setPermissionModal(false);
                navigation.navigate(QR_CODE.SCREEN);
              }}
            />
          )}
        </View>
      </Container>
    );
  }

  return (
    <Container header={{title: 'Scan', showBackButton: false}}>
      <ComingSoonWrapper>
        <Image source={require('@assets/images/scan/scan-coming-soon.png')} />

        <ComingSoonTitle>
          Scan QR to share and receive information securely with any
          organisation.{' '}
        </ComingSoonTitle>
        <ComingSoonSubTitle>Coming soon!</ComingSoonSubTitle>
      </ComingSoonWrapper>
    </Container>
  );
};

export default Scan;