import React from 'react';
import {View, Image, Text, Pressable} from 'react-native';
import {styles} from './styles';
import Icon from 'react-native-vector-icons/Ionicons';
// import branding from '../../branding';
import {globalStyles} from '../../../globalStyles';
import { getBranding } from '../../branding';
import { useMyStepsVerification } from '../../provider/verification.context';


const LOGO = '../../assets/logo.png';

type props = {
  userStep: number;
  findOutStepContent: () => {
    step: number;
    heading: string;
    subHeading: string;
  };
  goBackUserSteps: (index?: number) => void;
  allowSingle: boolean;
  skipFirstScreen?: boolean;
};

/**
 * A component for displaying the header of the user verification process, including the logo, heading, subheading, and navigation buttons.
 *
 * @param {Object} props - The component props.
 * @param {number} props.userStep - The current step in the user verification process.
 * @param {Function} props.findOutStepContent - A function that returns the content (heading and subheading) for the current step.
 * @param {Function} props.goBackUserSteps - A function that allows the user to go back to the previous verification step.
 * @returns {JSX.Element} - The rendered component as a JSX element.
 */

function Header({
  userStep,
  findOutStepContent,
  goBackUserSteps,
  allowSingle,
  skipFirstScreen,
}: props) {

  let context = useMyStepsVerification();
  const { onCancel } = context;

  return (
    <>
      {userStep !== 10 && userStep !== 11 && userStep !== 12 && (
        <>
          {userStep === 1 && (
            <View style={[styles.container]}>
              <View style={{width: 30}} />
              <Text style={[styles.heading, globalStyles.textMedium]}>
                {findOutStepContent()?.heading}
              </Text>
              {onCancel ? (
                <Pressable onPress={onCancel} style={({pressed}) => pressed && styles.opacity}>
                  <Icon name="close" size={30} color={getBranding().colors.textDefault} />
                </Pressable>
              ) : (
                <View style={{width: 30}} />
              )}
            </View>
          )}
          {userStep !== 1 && (
            <View style={[styles.container]}>
              <Pressable
                onPress={() => {
                  console.log(context.selectedOption)
                  if(allowSingle && context.selectedOption == "Passport" && userStep == 9)
                  {
                    goBackUserSteps(3);
                    return;
                  }
                  if (userStep == 3 && !allowSingle) {
                    goBackUserSteps(2);
                  } else {
                    goBackUserSteps();
                  }
                }}
                style={({pressed}) => pressed && styles.opacity}>
                {!((userStep == 2 || userStep == 3) && skipFirstScreen) && (
                  <Icon
                    name="arrow-back"
                    size={30}
                    color={getBranding().colors.textDefault}
                  />
                )}
              </Pressable>

              <View>
                {userStep === 1 && (
                  <Image style={styles.tinyLogo} source={require(LOGO)} />
                )}

                <Text style={[styles.heading, globalStyles.textMedium]}>
                  {findOutStepContent()?.heading}
                </Text>
                <Text style={[styles.subHeading, globalStyles.textMedium]}>
                  {findOutStepContent()?.subHeading}
                </Text>
              </View>

              {onCancel ? (
                <Pressable onPress={onCancel} style={({pressed}) => pressed && styles.opacity}>
                  <Icon name="close" size={30} color={getBranding().colors.textDefault} />
                </Pressable>
              ) : (
                <View style={{width: 30}} />
              )}
            </View>
          )}
        </>
      )}
    </>
  );
}

export default Header;