import {View, Image, Pressable, Text} from 'react-native';
import React from 'react';
import {styles} from './styles';
import {ImgUrlsType} from '../../provider/verification.context';
import {globalStyles} from '../../../globalStyles';
import overlayImage from '../../assets/faceki-overlay-camera-L2.png';
import Icon from 'react-native-vector-icons/Ionicons';
import {Platform} from 'react-native';
import { getBranding } from '../../branding';
import {useMyStepsVerification} from '../../provider/verification.context';
const IDCARD = '../../assets/idwhite.png';

const DLCARD = '../../assets/dlwhite.png';
const Passport = '../../assets/passportwhite.png';

type props = {
  imgUrls: ImgUrlsType;
  selectedOption: string;
  routeOfHandler: () => void;
  goBackUserSteps: (index?: number) => void;
  userStep: number;
  skipGuidanceScreens?: boolean;
  findOutStepContent: () => {
    step: number;
    heading: string;
    subHeading: string;
  };
};

/**
 * A component for displaying an image captured by the user and allowing the user to confirm or retake the photo.
 *
 * @param {Object} props - The component props.
 * @param {Object} props.imgUrls - An object containing the image URLs for the front and back of the ID card and the user's selfie.
 * @param {string} props.selectedOption - The currently selected option for the ID card type.
 * @param {Function} props.routeOfHandler - A function that handles the user's confirmation of the photo.
 * @param {Function} props.goBackUserSteps - A function that allows the user to go back to the previous verification step.
 * @param {number} props.userStep - The current step in the user verification process.
 * @returns {JSX.Element} - The rendered component as a JSX element.
 */

const ClarityCheck = ({
  imgUrls,
  selectedOption,
  routeOfHandler,
  goBackUserSteps,
  userStep,
  skipGuidanceScreens,
  findOutStepContent,
}: props) => {
  const { t } = useMyStepsVerification();
  let userImage =
    userStep === 8
      ? imgUrls[selectedOption].backImage
      : imgUrls[selectedOption].frontImage;

  // when i need to test selfie image only
  if (userStep === 10) {
    userImage = imgUrls[selectedOption].selfie;
  }

  return (
    <>
      <View style={styles.overlayContainer}>
        <Image
          source={{
            uri: Platform.OS == "android" ?  'file://' + userImage.path : userImage.path,
          }}
          style={styles.overlayImage}
          resizeMode="cover"
        />
      </View>
      <View style={styles.overlayContainer}>
        <Image
          source={overlayImage}
          style={styles.overlayImage}
          resizeMode="cover"
        />
      </View>
      <View style={styles.topContent}>
        <Pressable
          onPress={() => {
        
            goBackUserSteps();
          }}
          style={({pressed}) => pressed && styles.opacity}>
          <Icon name="arrow-back" size={30} color={'white'} />
        </Pressable>

        <View style={{alignItems: 'center'}}>
          <Text
            style={[
              globalStyles.textMedium,
              {
                color:
                  getBranding().colors.title_camera_color ||
                  getBranding().colors.primary,
                fontSize: 18,
                fontWeight: 700,
              },
            ]}>
            {findOutStepContent()?.heading}
          </Text>
          <Text style={[globalStyles.textMedium, {color: 'white'}]}>
            {findOutStepContent()?.subHeading}
          </Text>
          <View
            style={{
              flex: 1,
              flexDirection: 'row',
              justifyContent: 'center',
              alignItems: 'flex-start',
              marginTop: '10%',
            }}>
            <View
              style={{
                flex: 1,
                flexDirection: 'row',
                justifyContent: 'center',
                alignItems: 'center',
                // marginLeft: findOutStepContent()?.heading.includes('Driving') ? "14%" : 4,
              }}>
              <Image
                style={{
                  width: 30,
                  height: 30,

                  objectFit: 'contain',
                  marginRight: 7, // This controls space between image and text
                }}
                source={
                  findOutStepContent()?.heading.includes('ID Card')
                    ? require(IDCARD)
                    : findOutStepContent()?.heading.includes('Passport')
                    ? require(Passport)
                    : require(DLCARD)
                }
              />
              <Text
                key={'subtitle'}
                style={[
                
                  globalStyles.textMedium,
                  {
                    color:
                      getBranding().colors.title_camera_color ||
                      getBranding().colors.primary,
                    fontSize: 18,
                    fontWeight: '700',
                  },
                ]}>
            {userStep === 8 ? t.backSide : t.frontSide}
              </Text>
            </View>
          </View>

        
        </View>

        <Pressable style={({pressed}) => pressed && styles.opacity}>
          <Icon
            name="information-circle-outline"
            size={30}
            style={{opacity: 0}}
            // color={getBranding().colors.textDefault}
          />
        </Pressable>
      </View>

      <View style={styles.captureButtonContainer}>
        <View style={styles.buttonRow}>
          <Pressable
            style={({pressed}) =>
              pressed ? [styles.cta, styles.opacity] : styles.cta
            }
            onPress={routeOfHandler}>
            <Text style={[styles.ctaText, globalStyles.textMedium]}>
              {t.looksGood}
            </Text>
          </Pressable>
          <Pressable
            style={({pressed}) =>
              pressed ? [styles.retake, styles.opacity] : styles.retake
            }
            onPress={() => {
              goBackUserSteps();
            }}>
            <Text
              style={[
                styles.retakeButtonText,
                globalStyles.textMedium,
                {color: 'white'},
              ]}>
              {t.retakePhoto}
            </Text>
          </Pressable>
        </View>
      </View>
    </>
  );
};

export default ClarityCheck;