import React, {useCallback, useEffect, useRef} from 'react';
import {View} from 'react-native';
import {useTranslation} from 'react-i18next';
import {useCameraPermission} from 'react-native-vision-camera';
import {
  IconFocusCentered,
  IconMoodSmile,
  IconSun,
} from '@tabler/icons-react-native';
import {Avatar, BottomModalFooter, Title, Typography} from '@components';
import {Navigation} from '@interfaces/navigation';
import {
  openPermissionsDialog,
  openTimeTracker,
} from '@modules/timeTracking/redux';
import {useTimeoutHandler} from '@modules/timeTracking/hooks';
import {Screens} from '@shared/constants';
import {ICON_SIZES, useTheme} from '@shared/theme';

import {styles} from './styles';

function FacialRecognitionSetUp({
  navigation,
}: Navigation<Screens.FACIAL_RECOGNITION_SET_UP>) {
  const {theme} = useTheme();
  const {t} = useTranslation();
  const {hasPermission, requestPermission} = useCameraPermission();
  const preventOpenModal = useRef(false);

  useTimeoutHandler();

  useEffect(() => {
    const blur = navigation.addListener('blur', () => {
      preventOpenModal.current = true;
    });
    const focus = navigation.addListener('focus', () => {
      preventOpenModal.current = false;
    });
    const beforeRemove = navigation.addListener('beforeRemove', () => {
      if (!preventOpenModal.current) {
        openTimeTracker();
      }
    });
    return () => {
      blur();
      focus();
      beforeRemove();
    };
  }, [navigation]);

  const onContinue = useCallback(async () => {
    if (hasPermission) {
      navigation.navigate(Screens.CAMERA, {isSetUp: true});
    } else {
      const granted = await requestPermission();
      if (granted) {
        navigation.navigate(Screens.CAMERA, {isSetUp: true});
      } else {
        navigation.popToTop();
        openPermissionsDialog('cameraBlocker');
      }
    }
  }, [hasPermission, navigation, requestPermission]);

  return (
    <View
      style={[
        styles.container,
        {backgroundColor: theme.background.layout.default},
      ]}>
      <View style={styles.descriptorContainer}>
        <View style={styles.titleContainer}>
          <Avatar rounded Icon={IconFocusCentered} variant="primary" />
          <Title
            description={t(
              'time_tracker.facial_recognition_set_up_description',
            )}
            descriptionNumberOfLines={4}
            title={t('time_tracker.facial_recognition')}
          />
        </View>
        <View
          style={[
            styles.adviceContainer,
            {
              backgroundColor: theme.background.layout.tertiary,
              borderColor: theme.border.neutral.default,
            },
          ]}>
          <Typography weight="semiBold">
            {t('time_tracker.some_advice')}
          </Typography>
          <View style={[styles.row, styles.alignContainer]}>
            <IconSun color={theme.text.neutral.default} size={ICON_SIZES.x4} />
            <Typography color={theme.text.neutral.lighter} variant="xs">
              {t('time_tracker.good_lighting')}
            </Typography>
          </View>
          <View style={styles.row}>
            <IconMoodSmile
              size={ICON_SIZES.x4}
              color={theme.text.neutral.default}
            />
            <Typography color={theme.text.neutral.lighter} variant="xs">
              {t('time_tracker.visible_face')}
            </Typography>
          </View>
        </View>
      </View>
      <BottomModalFooter
        footer={{
          primaryButton: {onPress: onContinue, text: t('general.next')},
          secondaryButton: {
            onPress: navigation.goBack,
            text: t('general.exit'),
          },
        }}
        style={styles.bottomContainer}
      />
    </View>
  );
}

export default FacialRecognitionSetUp;