import React, {useContext} from 'react';
import { View, Text, ImageBackground, Image, TouchableOpacity, StyleSheet, Linking } from 'react-native';
import { DrawerContentScrollView, DrawerItemList } from '@react-navigation/drawer';
import { AuthContext } from '../../context/AuthContext';
import Spinner from 'react-native-loading-spinner-overlay/lib';
import Loader from '../Loader';

const CustomDrawer = props => {

    const {logout, isLoading} = useContext(AuthContext);

    return (
        <View style={styles.container}>
            <Loader visible={isLoading} />
            <DrawerContentScrollView {...props} contentContainerStyle={styles.drawer}>
                <ImageBackground source={require('../../assets/images/menu-bg.jpeg')} style={styles.backgroundImage}>
                    <Image source={require('../../assets/images/diligent-purple.png')} style={styles.profileImage} />
                    <Text style={styles.userName}>Diligent Software</Text>
                </ImageBackground>
                <View style={styles.drawerItems}>
                    <DrawerItemList {...props} />
                </View>
            </DrawerContentScrollView>
            <View style={styles.footer}>
                <TouchableOpacity onPress={() => Linking.openURL('mailto:office@dilig.net')} style={styles.footerButton}>
                    <View style={styles.buttonContent}>
                        <Text style={styles.footerButtonText}>Contact Us</Text>
                    </View>
                </TouchableOpacity>
                <TouchableOpacity onPress={logout} style={styles.footerButton}>
                    <View style={styles.buttonContent}>
                        <Text style={styles.footerButtonText}>Sign Out</Text>
                    </View>
                </TouchableOpacity>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1
    },
    drawer: {
        backgroundColor: '#8200d6'
    },
    backgroundImage: {
        padding: 20
    },
    profileImage: {
        height: 80,
        width: 80,
        borderRadius: 40,
        marginBottom: 10
    },
    userName: {
        color: '#fff',
        fontSize: 18,
        marginBottom: 5,
        fontFamily: 'poppins-regular'
    },
    drawerItems: {
        flex: 1,
        backgroundColor: '#fff',
        paddingTop: 10,
    },
    footer: {
        padding: 20,
        borderTopWidth: 1,
        borderTopColor: '#ccc'
    },
    footerButton: {
        paddingVertical: 15
    },
    buttonContent: {
        flexDirection: 'row',
        alignItems: 'center'
    },
    footerButtonText: {
        fontSize: 15,
        marginLeft: 5,
        fontFamily: 'poppins-regular'
    }
})

export default CustomDrawer;