import React, { Component } from 'react';
import { View, Text, Image, TouchableOpacity } from 'react-native';
import styles from './Styles/customStyle';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { logoutRequest } from './../../actions';
import { Images } from './../../theme';
import { ImageX } from './../../components';
import {APP_VERSION}from './../../config'
interface State {
  selected?: any;
  status?: boolean;
}
export interface Props {
  navigation: any;
  logout: any;
  profile: any;
  user: any;
}

class CustomComponent extends React.Component<Props, State> {
  constructor(props: any) {
    super(props);
    this.state = {};
  }
  render() {
    const { navigation, profile, user } = this.props;
    const { logout } = this.props;
    return (
      <View style={styles.mainContainer}>
        <View style={styles.viewStyle}>
          <Image style={styles.thinHeader} source={Images.headerThin} />
          <ImageX
            imageStyle={styles.profilePic}
            source={{ uri: profile.image_path }}
            defaultText={
              (profile.first_name && profile.first_name.charAt(0)) +
              ' ' +
              (profile.last_name && profile.last_name.charAt(0))
            }
            style={styles.profilePic}
          />

          <Text style={styles.userNameTxt} numberOfLines={2}>
            {((!!profile.first_name && profile.first_name) || user.first_name) +
              ' ' +
              ((!!profile.last_name && profile.last_name) || user.last_name)}
          </Text>
          <View style={styles.marginTop}>
            <TouchableOpacity
              onPress={() => {
                navigation.navigate('DrawerClose');
                navigation.navigate('Profile');
              }}
              style={styles.itemBtn}>
              <View style={styles.iconView}>
                <Image
                  style={styles.profileIcon}
                  source={require('./../../assets/images/profile.png')}
                />
              </View>
              <Text style={styles.itemTxt}>Profile</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => navigation.navigate('DrawerClose')}
              style={styles.itemBtn}>
              <View style={styles.iconView}>
                <Image
                  style={styles.searchBookIcon}
                  source={require('./../../assets/images/sb.png')}
                />
              </View>
              <Text style={styles.itemTxt}>Search Book</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                navigation.navigate('DrawerClose');
                navigation.navigate('BookRequestList');
              }}
              style={styles.itemBtn}>
              <View style={styles.iconView}>
                <Image
                  style={styles.newReqBookIcon}
                  source={Images.newBookRequestIcon}
                />
              </View>
              <Text style={styles.itemTxt}>Book Request</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.itemBtn}
              onPress={() => {
                navigation.navigate('DrawerClose');
                navigation.navigate('BookHistory');
              }}>
              <View style={styles.iconView}>
                <Image
                  style={styles.bookHistoryIcon}
                  source={Images.bookHistoryIcon}
                />
              </View>
              <Text style={styles.itemTxt}>Books History</Text>
            </TouchableOpacity>
            <TouchableOpacity
              onPress={() => {
                navigation.navigate('DrawerClose');
                navigation.navigate('ChangePassword');
              }}
              style={styles.itemBtn}>
              <View style={styles.iconView}>
                <Image
                  style={styles.changePwdIcon}
                  source={Images.changePasswordIcon}
                />
              </View>
              <Text style={styles.itemTxt}>Change Password</Text>
            </TouchableOpacity>
            <TouchableOpacity
              style={styles.itemBtn}
              onPress={() => {
                logout();
              }}>
              <View style={styles.iconView}>
                <Image
                  style={styles.logoutIcon}
                  source={require('./../../assets/images/LogOut.png')}
                />
              </View>
              <Text style={styles.itemTxt}>Log Out</Text>
            </TouchableOpacity>
           
          </View>
          <View style={styles.bottomVersionTxt}>
              <Text style={styles.versionTxt}>{APP_VERSION}</Text>
          </View>
        </View>
      </View>
    );
  }
}

function mapStateToProps({ user }: any) {
  return {
    user: (user.user && user.user.user) || {},
    profile: user.profile || {}
  };
}

function mapDispatchToProps(dispatch: any) {
  return bindActionCreators(
    {
      logout: logoutRequest
    },
    dispatch
  );
}

export default connect(mapStateToProps, mapDispatchToProps)(CustomComponent);
