import React, {useState} from 'react';
import {
  View,
  Text,
  Image,
  StatusBar,
  StyleSheet,
  SafeAreaView,
  ImageBackground,
  TouchableOpacity,
  Platform,
  Button,
  TouchableWithoutFeedback,
} from 'react-native';
import R from '../../assets/R';
import {getFontXD, HEIGHT, WIDTHXD} from '../../Config/Functions';
import LinearGradient from 'react-native-linear-gradient';
import {connect} from 'react-redux';
import Modal from 'react-native-modal';
import Drawer from './Drawer';
import SnackBar from '../SnackBar';
import AppText from '../AppText';
import Icon from 'react-native-vector-icons/Ionicons';
import {useNavigation} from '@react-navigation/native';

const HeaderDrawer = (props) => {
  const {title, isWhite} = props;
  const navigate = useNavigation();
  return (
    <ImageBackground
      imageStyle={{resizeMode: 'stretch'}}
      style={[styles.img, isWhite ? {backgroundColor: 'white'} : {}]}
      source={R.images.bgHeader}>
      <SnackBar />
      <StatusBar backgroundColor="transparent" translucent={true} />

      <View style={styles.headerContainer}>
        <TouchableOpacity
          onPress={() => navigate.goBack()}
          style={{width: 35, height: 30}}>
          <Image source={R.images.iconBack} style={styles.imgIcon} />
        </TouchableOpacity>

        <AppText i18nKey={title} style={styles.txtTitle}></AppText>

        <TouchableOpacity
          style={{width: 35, height: 35}}
          onPress={props.onOpenSearch}>
          <Icon name={'search-sharp'} size={25} color={R.colors.white} />
        </TouchableOpacity>
      </View>
    </ImageBackground>
  );
};

const mapStateToProps = (state) => {
  return {
    user: state.userReducer,
  };
};

export default connect(mapStateToProps, {})(HeaderDrawer);

const styles = StyleSheet.create({
  img: {
    height: 95,
    width: '100%',

    paddingTop: 30,
  },
  headerContainer: {
    height: 40,
    paddingTop: 10,
    width: '100%',
    alignItems: 'center',
    flexDirection: 'row',
    paddingHorizontal: 20,
    justifyContent: 'space-between',
  },
  imgIcon: {
    width: 25,
    height: 20,
  },
  txtTitle: {
    fontSize: getFontXD(52),
    color: R.colors.white,
    fontWeight: 'bold',
  },
  container: {
    backgroundColor: 'white',
    height: '100%',
    width: WIDTHXD(780),
    borderRadius: 20,
  },
});
