import React, { useState, useEffect, useRef } from "react";
import { Text, TouchableOpacity, View, Image, StatusBar, 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 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 prevRoute = props.prevRoute

  // console.log("prevRoute",prevRoute)

  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]}>
      <StatusBar barStyle={"light-content"} backgroundColor={'transparent'} translucent={true} />
      <View style={[Platform.OS=='ios'?{ marginTop: "10%", height: "100%" }:{height: "80%"}]}>
        <View style={globalStyle.dScreenHdr_Content}>
          <Text style={globalStyle.drawerScreenHdr_title}>{props.title}</Text>
          <View style={[globalStyle.dScreen_LeftContainer,{zIndex:10000}]}>
            <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>}
              <TouchableOpacity activeOpacity={0.6} style={globalStyle.drawerNotifIcon} onPress={() => { }}>
                <MaterialCommunityIcons name='bell-ring-outline' size={20} color={PageTheme.$accent_color} />
              </TouchableOpacity>
            </View>
          }
        </View>
        {
          props.hideTimer != true &&
          <View style={customStyle.clocktimerWrap}>
            <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 CustomHeader;