import { EvilIcons } from '@expo/vector-icons';
import { DrawerActions, useFocusEffect, useRoute } from '@react-navigation/native';
import React, { useCallback, useEffect, useState } from 'react';
import { BackHandler, Dimensions, Image, Platform, Text, TouchableOpacity, View } from 'react-native';
import { Appbar, IconButton } from 'react-native-paper';
import { useDispatch, useSelector } from 'react-redux';
import { loginOut } from '../../../state/actions/authActions';
import { getAllNotification } from '../../../state/actions/notificationAction';

const Header = ({ navigation, page }: { navigation: any, page: string }) => {
  const dispatch = useDispatch();
  const isAuthenticated = useSelector(state => state.auth.isAuthenticated);
  const userName = useSelector(state => state.auth?.user?.User_Name ? state.auth.user.User_Name : "");
  const userPic = useSelector(state => state.auth?.isAuthenticated ? state.auth?.user?.Profile_Pic_Path ? { uri: state.auth?.user?.Profile_Pic_Path } : require("../../../assets/images/icons/user.png") : require("../../../assets/images/icons/user.png"));

  const EmailID = useSelector(state => state.auth?.user);
  if (page == "Auth") {
    if (isAuthenticated) {
      setTimeout(() => {
        navigation.navigate('Home');
      }, 1)
    }
  } else {
    if (!isAuthenticated) {
      setTimeout(() => {
        navigation.navigate('SignIn');
      }, 1)
    }
  }
  const route = useRoute();
  const [notifications, setNotifications] = useState();
  const [loading, setLoading] = useState(true);

  const callBackData = (data: any) => {
    if (data.Count) {
      setNotifications(data.Count)
    }
  }
  useEffect(() => {
    if (EmailID) {
      let filter = {
        Partner_Details_Id: EmailID?.Partner_Details_Id,
        Records_Filter: "FILTER"
      }
      dispatch(getAllNotification(filter, callBackData))
    }
  }, [])


  const backAction = () => {
    let name = null;
    try {
      name = route.name;
    } catch (error) {
    }

    if (isAuthenticated ) {
      navigation.navigate("Home");
      if (Platform.OS === "web") {
        return false;
      } else {
        BackHandler.exitApp();
        return true;
      }
    } else if (!isAuthenticated) {
      if (name === "SignUp") {
        navigation.navigate("SignUp");
      }
      else if (name === "ForgotPassword") {
        navigation.navigate("ForgotPassword");
      } else {
        navigation.navigate("SignIn");
      }
    }
    else {
      return false;
    }
  };
  const backHandler = BackHandler.addEventListener(
    "hardwareBackPress",
    backAction
  );

  useEffect(() => {
    if (isAuthenticated) {
      navigation.navigate('Home');
    }
    return () => {
      backHandler.remove();
    }
  }, [isAuthenticated]);

  // useEffect(() => {
  //   setSeconds(2);
  // }, [isAuthenticated]);

  // const [seconds, setSeconds] = React.useState(-1);
  // React.useEffect(() => {
  //   const timer = setTimeout(() => {
  //     seconds > 0 ? setSeconds(seconds - 1) : setSeconds(-1);
  //     if (seconds === 1) {
  //       if (!isAuthenticated) {
  //         navigation.navigate("SignIn");
  //       }
  //     }
  //   }, 1000)
  //   return () => clearTimeout(timer)
  // }, [seconds]);

  const _handleSignOut = () => {
    dispatch(loginOut(navigation));
  };

  const _handleMore = () => {
    if (!(page == "auth"))
      navigation.dispatch(DrawerActions.openDrawer())
  };
  const _handleProfile = () => navigation.navigate('PartnerProfile');
  const [dimensions, setDimensions] = useState(Dimensions.get('window').width);
  useEffect(() => {
    const subscription = Dimensions.addEventListener(
      "change",
      ({ window, screen }) => {
        setDimensions(window.width);
      }
    );
  });
  return (
    <Appbar.Header style={{ height: 60, backgroundColor: "#27B6CC" }}>

      <TouchableOpacity onPress={_handleMore}>
        <EvilIcons name="navicon" size={35} color="white" style={{ paddingTop: 5, paddingLeft: 10 }} />
      </TouchableOpacity>

      <View style={{ flex: 1, alignItems: 'flex-start', marginLeft: -15 }}>

        <Appbar.Action size={72} color={'white'} onPress={(e) => { isAuthenticated ? navigation.navigate('Dashboard') : null }} icon={require('../../../assets/images/img/logo/logo.png')} />
      </View>

      <Appbar.Content />

      <View style={{ alignItems: 'center', justifyContent: 'center' }}>
        {isAuthenticated ?
          <IconButton
            icon="bell"
            color={"white"}
            size={20}
            onPress={(e) => { navigation.navigate("Notification") }}
          /> : null}
        {notifications && notifications !== "0" ?
          <View
            style={{
              position: 'absolute',
              backgroundColor: 'red',
              width: 16,
              height: 16,
              borderRadius: 15 / 2,
              right: 5,
              top: 9,
              alignItems: 'center',
              justifyContent: 'center',
            }}>
            <Text
              style={{
                alignItems: 'center',
                justifyContent: 'center',
                color: "#FFFFFF",
                fontSize: 8,
              }}>
              {notifications}
            </Text>
          </View>
          : null}
        <View>
        </View>
      </View>
      {
        page === "auth" ? <Appbar.Action icon={require('../../../assets/images/icons/user.png')} /> :

          <TouchableOpacity onPress={_handleProfile}>
            < Image source={userPic} style={{ height: 25, width: 25, borderRadius: 50, backgroundColor: 'white', marginRight: 15, marginTop: 2 }}></Image>
          </TouchableOpacity >

      }

      {/* {
        !(page === "auth") &&
        <Appbar.Action icon={"power"} color={'white'} onPress={_handleSignOut} />} */}
    </Appbar.Header >
  );
};

export default Header;