import React, { useState, useEffect, useRef } from "react";
import { Text, TouchableOpacity, View, Image, StatusBar, StyleSheet } from "react-native";

import { GetPageTheme, customStyles, globalStyles } from "../styles/Global";
import { useRoute } from '@react-navigation/native';
import {Entypo, Fontisto, MaterialCommunityIcons, FontAwesome } from "./icons";
import moment from 'moment';
import LinearGradient from 'react-native-linear-gradient';
import { DevType } from "../constants/constants";

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('');
    const [isRed, setIsRed] = useState(true);


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

    useEffect(() => {
        var interval
        if (props?.TrainingOrg2?.length > 0) {
            interval = setInterval(() => {
                setIsRed(prev => !prev);
            }, 500); // changes every 500ms
        }
        return () => clearInterval(interval); // cleanup
    }, [props?.TrainingOrg2]);

    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();
    }


    return (
        <LinearGradient colors={[PageTheme.$gradient1, PageTheme.$primary_color]} start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={globalStyle.drawerScreenHdr_bg}>
            <StatusBar backgroundColor={PageTheme.$primary_color} translucent={true} {...props} barStyle={"light-content"} />
            <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 : ' + (DevType == "Prod" ? (props.projectCode != null ? props.projectCode : '') : props?.projectCode + "_Dev")}</Text>
                    <TouchableOpacity activeOpacity={0.6} style={[globalStyle.drawerNotifIcon, styles.button]} onPress={() => props.navigation.navigate('NotificationList')}  >
                        <View style={{}}>
                            <MaterialCommunityIcons name='bell-ring-outline' size={20} color={PageTheme.$accent_color} />
                            <View style={styles.itemCountContainer}>
                                <Text style={styles.itemCountText}>{props?.badgeCount ? props?.badgeCount : 0}</Text>
                            </View>
                        </View>
                    </TouchableOpacity>
                    {/* <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>
            <View style={[customStyle.clocktimerWrap, { flexDirection: "row", justifyContent: "space-between", alignItems: 'center' }]}>
                <View style={[customStyle.clocktimerRow, props.Gyancast && { height: "50%" }]}>
                    <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>

                {props.Gyancast &&
                    <TouchableOpacity style={[globalStyle.toggleDrawerBtn, { alignItems: "center" }]} onPress={() => { props.navigation.navigate('Gyancasts') }}>
                        {/* <SvgXml width={45} height={45} xml={props?.TrainingOrg2?.length>0?Gyancastsicon_red:Mic}/> */}
                        <View style={customStyle.NB_quickL_IconS2}>
                            <Image
                                source={require('../assets/image/Gyancast.gif')}
                                style={{ "width": 50, "height": 50 }}
                                resizeMode="contain"
                            />
                            {props?.TrainingOrg2?.length > 0 && <Text style={{ color: isRed ? 'red' : 'green', fontSize: 40, fontWeight: "bold", position: "absolute", top: -23, left: 0 }}>{'\u2022'}</Text>}
                        </View>
                        <Text style={{ color: "#FFF", fontSize: 10, fontWeight: "bold", marginTop: 3 }} >GyanCast</Text>
                    </TouchableOpacity>}
            </View>
        </LinearGradient>
    )
}

export default DrawerHeader;

const styles = StyleSheet.create({
    button: {
        marginRight: 20,
    },
    itemCountContainer: {
        position: "absolute",
        height: 20,
        width: 20,
        borderRadius: 15,
        backgroundColor: "#FF7D7D",
        left: 18,
        bottom: 10,
        alignItems: "center",
        justifyContent: "center",
        zIndex: 2000,
    },
    itemCountText: {
        color: "white",
        fontWeight: "bold",
        textAlign: "center",
    },
})