import React from 'react';
import { View, Image, TouchableOpacity, Text, Platform } from 'react-native';
import styles from './styles/index';
import HeaderLeft from './Left';
import HeaderTitle from './Title';
import Icon1 from 'react-native-vector-icons/AntDesign';
import { Colors, Images } from './../../theme';
import { isIphoneX } from './../../libs/Utils';
import HeaderRight from './Right';
import { NavigationBackActionPayload } from 'react-navigation';

export interface Props {
  style?: any;
  children?: any;
  transparent?: boolean;
  title?: string;
  titleStyle?: any;
  hasBackBtn?: boolean;
  isWhiteBackBtn?: boolean;
  onBackPress?: any;
  navigation?: any;
  drawerButton?: any;
  hasMenuBtn?: any;
  btnPress?: any;
  hasPaddingTop?: any;
  hasPaddingTopForBookDetails?: any;
  hasPaddingTopForBookDetailsIcon?: any;
  isTransparent?: any;
  rightBtn?: any;
  hasHeaderThin?: any;
  profileBackImage?: any;
}

export default class Header extends React.PureComponent<Props> {
  static TITLE = HeaderTitle;

  static LEFT = HeaderLeft;

  //   static RIGHT = HeaderRight;

  render() {
    const {
      style,
      children,
      transparent,
      hasBackBtn,
      navigation,
      title,
      titleStyle,
      onBackPress,
      drawerButton,
      hasMenuBtn,
      btnPress,
      hasPaddingTop,
      isWhiteBackBtn,
      isTransparent,
      rightBtn,
      hasHeaderThin,
      hasPaddingTopForBookDetails,
      hasPaddingTopForBookDetailsIcon,
      profileBackImage
    } = this.props;
    return (
      <View style={[styles.header, style, transparent && styles.transparent]}>
        {title && (
          <HeaderTitle
            style={[
              titleStyle,
              !hasPaddingTop && { paddingTop: 15 },
              hasPaddingTopForBookDetails && { paddingTop: 3 }
            ]}>
            {title}
          </HeaderTitle>
        )}
        <View
          style={[
            styles.somePaddingTop,
            isTransparent && { backgroundColor: Colors.transparent }
          ]}
        />
        {isIphoneX() ? (
          <View
            style={[
              styles.iPhoneXPadding,
              isTransparent && { backgroundColor: Colors.transparent }
            ]}
          />
        ) : (
          <View />
        )}
        {hasPaddingTop ? (
          <View
            style={[
              styles.morePaddingTop,
              isTransparent && { backgroundColor: Colors.transparent }
            ]}
          />
        ) : (
          <View />
        )}
        {!isTransparent && (
          <Image style={styles.header1} source={Images.header} />
        )}
        {hasHeaderThin && (
          <Image style={styles.headerThin} source={Images.headerThin} />
        )}
        {hasMenuBtn && (
          <HeaderLeft style={styles.defaultBackBtnHeaderStyle}>
            <TouchableOpacity style={styles.backBtn} onPress={btnPress}>
              <Image source={Images.drawerIcon} style={styles.drawerIconImg} />
            </TouchableOpacity>
          </HeaderLeft>
        )}
        {hasBackBtn && (
          <HeaderLeft style={[styles.defaultBackBtnHeaderStyle]}>
            <TouchableOpacity
              style={styles.backBtn}
              onPress={() => {
                if (onBackPress) onBackPress();
                else if (navigation) navigation.goBack(null);
              }}>
              <Image
                source={isWhiteBackBtn ? Images.backWhite : Images.backBlue}
                style={[
                  styles.backImg,
                  hasPaddingTopForBookDetailsIcon && styles.backImgBookDetails,
                  profileBackImage && styles.profileBackImage
                ]}
              />
            </TouchableOpacity>
          </HeaderLeft>
        )}
        {rightBtn && <HeaderRight>{rightBtn}</HeaderRight>}
        {children}
      </View>
    );
  }
}
