

import React, { useState, useEffect, useRef } from "react";
import { Text, TouchableOpacity, View, Image, StatusBar, SafeAreaView, Platform } from "react-native";
import { customeButtons, GetPageTheme, customStyles, globalStyles } from "../styles/Global";
import { useRoute } from '@react-navigation/native';
import { AntDesign, Entypo, Fontisto, MaterialCommunityIcons, FontAwesome } from "./icons";
import moment from 'moment';
import LinearGradient from 'react-native-linear-gradient';


function DrawerHeader(props) {
    const route = useRoute();
    const isCancelled = useRef(false);
    const PageTheme = GetPageTheme(props.DarkTheme, route.name);
    const globalStyle = globalStyles(props.DarkMode, route.name);
    const customStyle = customStyles(props.DarkMode, route.name);
    const [currentTime, setCurrentTime] = useState('');
    const [currentDate, setCurrentDate] = useState('');

    useEffect(() => {
        setTimer();
        return () => { isCancelled.current = true; };
    }, []);

    function setTimer() {
        if (!isCancelled.current) {
            let d1 = new Date();
            let now = moment(d1).format('hh:mm:ss a');
            let ndate = moment(d1).format('DD/MM/YYYY');
            setCurrentTime(now);
            setCurrentDate(ndate);
            setTimeout(() => { setTimer(); }, 1000);
        }
    }


    function toggleDrawer() {
        props.navigation.toggleDrawer();
    }
    // console.log("route.name---",route.name)

    return (
        <LinearGradient colors={[PageTheme.$gradient1, PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[globalStyle.drawerScreenHdr_bg, (route.name == "NoticeBoard" && { height: Platform.OS=='ios'?"18%":"12%" })]}>
            <StatusBar backgroundColor={'transparent'} translucent={true} {...props} barStyle={"light-content"} />
            <View style={{ marginTop: Platform.OS=='ios'?"15%":"2%" }}>
                <View style={[globalStyle.dScreenHdr_Content]}>
                    <Text style={globalStyle.drawerScreenHdr_title}>{props.drawer_title != null ? props.drawer_title : route.name}</Text>
                    <View style={globalStyle.dScreen_LeftContainer}>
                        <TouchableOpacity activeOpacity={0.6} style={globalStyle.toggleDrawerBtn} onPress={() => { toggleDrawer() }}>
                            <FontAwesome name='bars' size={20} color={PageTheme.$accent_color} />
                        </TouchableOpacity>
                    </View>
                    <View style={globalStyle.dScreen_RightContainer}>
                        <Text style={globalStyle.drawerProjectId}>{'Id : ' + (props.projectCode != null ? props.projectCode : '')}</Text>
                        <TouchableOpacity activeOpacity={0.6} style={globalStyle.drawerNotifIcon} onPress={() => { }}>
                            <MaterialCommunityIcons name='bell-ring-outline' size={20} color={PageTheme.$accent_color} />
                        </TouchableOpacity>
                    </View>
                </View>
                <View style={[customStyle.clocktimerWrap, { paddingTop: "3%" }]}>
                    <View style={customStyle.clocktimerRow}>
                        <Entypo name='calendar' color={PageTheme.$primary_color} size={14} /><Text style={[customStyle.clocktimerText, customStyle.mr10]}>{currentDate}</Text>
                        <Fontisto name='clock' color={PageTheme.$primary_color} size={14} /><Text style={customStyle.clocktimerText}>{currentTime}</Text>
                    </View>
                </View>
            </View>
        </LinearGradient>
    )
}

export default DrawerHeader;