// components/Hello.tsx
import React, {ReactNode, useState} from 'react';
import {StyleProp, Text, TouchableOpacity, View, ViewStyle, Image} from 'react-native';
import pxToDp from '../helper/pxToDp';
import {RootNavigationProp} from '../types/RootNavigationProp'
import { THEME } from '../theme';

export interface Props {
  backgroundColor: string;
  title: string;
  textColor: string;
  navigation: RootNavigationProp;
  hideBack?: boolean;
  customBackFunction?: () => void;
  backIconType?: number;
  rightView?: ReactNode;
}

const MyHeader: React.FC<Props> = props => {
  const containerStyle: StyleProp<ViewStyle> = {
    backgroundColor: props.backgroundColor,
    height: pxToDp(88),
    width: '100%',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    paddingHorizontal: pxToDp(24),
  };
  let backImage = <Image
    source={require('../img/Return.png')}
    style={{width: pxToDp(16), height: pxToDp(28), tintColor: props.textColor || THEME.text}}
    resizeMode="stretch" />
    
  return (
    <View style={containerStyle}>
      {props.hideBack ? (
        <View style={{width: pxToDp(56), height: pxToDp(56)}} />
      ) : (
        <TouchableOpacity
          style={{width: pxToDp(56), height: pxToDp(56), alignItems:'center', justifyContent:'center'}}
          onPress={() => {
            if (props.customBackFunction) {
              props.customBackFunction();
            } else {
              props.navigation.goBack();
            }
          }}>
          {backImage}
        </TouchableOpacity>
      )}
      <Text
        style={{
          width: pxToDp(400),
          fontSize: pxToDp(34),
          color: props.textColor || THEME.text,
          textAlign: 'center',
          fontWeight: 'bold',
          letterSpacing: 1,
        }}>
        {props.title}
      </Text>
      <View style={{width: pxToDp(56), position: 'relative'}}>
        {props.rightView}
      </View>
    </View>
  );
};

export default MyHeader;
