import React, {useEffect, useState} from 'react';
import {
  ImageBackground,
  Image,
  TouchableOpacity,
  Text,
  View,
} from 'react-native';
import {
  DrawerContentScrollView,
  DrawerItemList,
} from '@react-navigation/drawer';
import {IMAGES} from '../../values/images';
import styles from './style';
import {useDispatch, useSelector} from 'react-redux';
import {logoutApp} from '../../store/actions/CommonAction';
const CustomDrawer = props => {
  const userDetails = useSelector(state => state.UserInfo.userInfo);
  const dispatch = useDispatch();
  const navigateToLogout = () => {
    dispatch(logoutApp());
  };
  return (
    <View style={{flex: 1}}>
      <DrawerContentScrollView {...props}>
        <ImageBackground style={{padding: 20}} source={IMAGES.BgProfile}>
          <Image
            style={styles.iconUser}
            source={{uri: 'https://meu.anawork.com' + userDetails.avatar}}
          />
          <Text style={styles.text}>{`${userDetails.first_name} ${
            userDetails.middle_name ? userDetails.middle_name : ''
          } ${userDetails.last_name}`}</Text>
        </ImageBackground>
        <DrawerItemList {...props} />
      </DrawerContentScrollView>
      <TouchableOpacity onPress={navigateToLogout} style={styles.btnLogout}>
        <Image
          source={IMAGES.IcLogout}
          style={{width: 20, height: 20, marginRight: 10}}
        />
        <Text>Đăng xuất</Text>
      </TouchableOpacity>
    </View>
  );
};

export default CustomDrawer;
