import React from 'react';
import { View, TouchableOpacity, Image } from 'react-native';
import styles from './Styles';
import HeaderLeft from './Left';
import HeaderRight from './Right';
import HeaderTitle from './Title';
import LinearGradient from 'react-native-linear-gradient';
import { Images } from './../../theme';

const backBlueImg = Images.backBlue;
const backWhiteImg = Images.backWhite;

export interface Props {
  style?: any;
  children?: any;
  transparent?: boolean;
  title?: string;
  titleStyle?: any;
  hasBackBtn?: boolean;
  isWhiteBackBtn?: boolean;
  onBackPress?: any;
  navigation?: any;
  sideRightImageSource?: any;
  sideRightImageStyle?: any;
}

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

  static LEFT = HeaderLeft;

  static RIGHT = HeaderRight;

  render() {
    const {
      style,
      children,
      transparent,
      hasBackBtn,
      navigation,
      title,
      titleStyle,
      onBackPress,
      isWhiteBackBtn,
      sideRightImageSource,
      sideRightImageStyle
    } = this.props;
    return (
      <View style={[styles.header, style, transparent && styles.transparent]}>
        <View style={styles.headerBlue}>
          <Image style={styles.header} source={Images.bigHeader} />
          {sideRightImageSource && (
            <Image
              style={sideRightImageStyle || {}}
              source={sideRightImageSource}
            />
          )}
          <LinearGradient
            colors={['#ffffff', '#ffffff', '#ffffff']}
            style={styles.gStyle2}
          />

          <LinearGradient
            colors={['#ffffff', '#ffffff', '#ffffff']}
            style={styles.gStyle3}
          />

          <LinearGradient
            colors={['#3d1e71', '#3d1e71', '#3d1e71']}
            style={styles.gStyle4}
          />
        </View>
        {hasBackBtn && (
          <HeaderLeft>
            <TouchableOpacity
              style={styles.backBtn}
              onPress={() => {
                if (onBackPress) onBackPress();
                else if (navigation) navigation.goBack(null);
              }}>
              <Image
                source={isWhiteBackBtn ? backWhiteImg : backBlueImg}
                style={styles.backImg}
              />
            </TouchableOpacity>
          </HeaderLeft>
        )}
        {title && <HeaderTitle style={titleStyle}>{title}</HeaderTitle>}
        {children}
      </View>
    );
  }
}
