import React, { useState, useEffect, useRef } from "react";
import { Text, View, Image, StatusBar, StyleSheet, TouchableOpacity } from "react-native";
// import { TouchableOpacity } from "react-native-gesture-handler";
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 CustomHeader(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 goBack = () => {
    props.navigation.goBack();
  }

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

  }

  return (
    <LinearGradient colors={[PageTheme.$gradient1, PageTheme.$primary_color]}
      start={{ x: 0, y: 0 }} end={{ x: 1, y: 0 }} style={[globalStyle.drawerScreenHdr_bg, { zIndex: 1000 }, styles.linearGradient]}>
      <StatusBar barStyle={"light-content"} backgroundColor={'transparent'} translucent={true} />
      <View style={[globalStyle.dScreenHdr_Content, { zIndex: 1000 }]}>
        <Text style={globalStyle.drawerScreenHdr_title}>{props.title}</Text>
        <View style={globalStyle.dScreen_LeftContainer}>               
          <TouchableOpacity
           style={[customStyle.toggleDrawerBtn, customStyle.headerLeftIcon]} onPress={() =>  { props.onPress != null ? props.onPress() : goBack() }}>
            <AntDesign color={PageTheme.$accent_color} size={20} name='arrowleft' />
          </TouchableOpacity>
        </View>
        {props.hideBellIcon != true &&
          <View style={globalStyle.dScreen_RightContainer}>
            {props.projectCode != null && <Text style={globalStyle.drawerProjectId}>{(props.projectCode != null ? (props.projectCode.length > 15 ? props.projectCode.substring(0, 15) + '...' : props.projectCode) : '')}</Text>}
            {
              props?.screen === "AddStoreInfo" ? (
                <TouchableOpacity activeOpacity={0.6} style={globalStyle.drawerNotifIcon} onPress={() => props.navigation.navigate('StoreInfoList')}>
                  <Entypo name='dots-three-vertical' size={20} color={PageTheme.$accent_color} />
                </TouchableOpacity>
              ) : props?.screen !== "NotificationList" && props?.screen !== "NotificationListDetail" ? (

                  <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>
                
              ) : null
            }
          </View>
        }
      </View>
      {
        props.hideTimer != true &&
        <View style={[
          customStyle.clocktimerWrap,
          {flexDirection:'row', justifyContent:'space-between', }]}>
          <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>
          {/* AddNewStoreInJCP */}
        {props.showaddstore != true && props.AddNewStoreInJCP==true &&  
        <TouchableOpacity activeOpacity={0.4} style={[customStyle.addstorebtn, { width:'35%'}]} onPress={() => props.navigation.navigate('AddStore')}  >
          <Text style={[customStyle.vlEmplSearchBtnText, {color:'#1f7dbc'}]}>{"Add Store"}</Text>
        </TouchableOpacity> }
        {props.screen == 'AddStore' && props.ShowAddNewStore==true &&  
        <TouchableOpacity activeOpacity={0.4} style={[customStyle.addstorebtn, { width:'35%'}]} onPress={() => props.navigation.navigate('AddedStoreList')}  >
          <Text style={[customStyle.vlEmplSearchBtnText, {color:'#1f7dbc'}]}>{"Added Stores"}</Text>
        </TouchableOpacity> }
        </View>
      }
       


    </LinearGradient>
  );
}
export default CustomHeader;

const styles = StyleSheet.create({
  button: {
    paddingRight: 20
  },
  itemCountContainer: {
    position: "absolute",
    height: 19,
    width: 20,
    borderRadius: 15,
    backgroundColor: "#FF7D7D",
    left: 20,
    bottom: 6,
    alignItems: "center",
    justifyContent: "center",
    zIndex: 5000,
  },
  itemCountText: {
    color: "white",
    fontWeight: "bold",
    textAlign: "center",
  },
  linearGradient: {
    position: 'relative', // Ensure the linear gradient container has a position style set
  }
})
