import * as React from 'react';
import { SafeAreaView, View, Text, ScrollView, RefreshControl, Platform, AppState } from 'react-native';
import { BackHandler, ToastAndroid } from 'react-native';
import { connect } from "react-redux";
import { saveUserInfo } from "../../redux/actions/AppUserInfoActions";
import { saveWhatshot, savePromos, saveGuestWhatshot, saveGuestPromos } from "../../redux/actions/AppWhatshotAndPromosActions";
import NetInfo from "../../components/netstatus"
import CustomHeader from '../../components/header.js';
import EmptyHeader from '../../components/header/empty';
import GuestHeader from '../../components/header/guest';
import Theme from '../../components/theme.style.js';
import Elements from '../../components/elements.js';
import REQUEST from '../../components/api/';
import DB from '../../components/storage/';
import RNLocation from 'react-native-location';
import messaging from '@react-native-firebase/messaging';
import { SliderBox } from "react-native-image-slider-box";
import CustomSafeArea from '../../components/safeArea.component';
var PushNotification = require("react-native-push-notification");


class Home extends React.PureComponent {

  constructor(props) {
    super(props)
      this.navigate = (screen, params) => { props.navigation.navigate(screen, params) }
      this.displayBanner = false
  }

  state = {
    loading: true,
    refresh: false,
    connected: false,
    infodialog: true,
    promogps: [],
    showpromogps: false,
    promogpsindex: 0,
    _carousel: "",
    promos: (this.props.whats_hot != undefined && this.props.whats_hot.length > 0) ? this.props.whats_hot : [],
    whatsHot: (this.props.promos != undefined && this.props.promos.length > 0) ? this.props.promos : [],
    activeSlide: 0,
    session: null,
    userProfile: {},
    notifications: [],
    notificationindex: 0,
    isGuest: false,
    coordinates: undefined,
    appState: AppState.currentState
  }

  componentDidMount() {
    AppState.addEventListener('change', this._handleAppStateChange)
    this.initLocationConfiguration()
    this.init()
  }

  componentWillUnmount() {
    AppState.removeEventListener('change', this._handleAppStateChange)
  }

  _handleAppStateChange = (nextAppState) => {
    if (this.state.appState.match(/inactive|background/) && nextAppState === 'active') {
      // this.getPromoDiscountNotifications()
    }
    this.setState({ appState: nextAppState })
  }


  initLocationConfiguration = () => {
    RNLocation.configure({
      // iOS Only
      activityType: "other",
      allowsBackgroundLocationUpdates: false,
      headingFilter: 1, // Degrees
      headingOrientation: "portrait",
      pausesLocationUpdatesAutomatically: false,
      showsBackgroundLocationIndicator: false,
    })

    RNLocation.requestPermission({
      ios: "whenInUse", // or 'always'
    }).then(granted => {
      if(granted) {
        this.locationUpdate()
      }
    })
  }

  locationUpdate = () => {
    RNLocation.getLatestLocation({ timeout: 20000 }).then(latestLocation => {
      if(latestLocation != undefined) {
        this.setState({ coordinates: { longitude: latestLocation.longitude, latitude: latestLocation.latitude } })
      }
    })
  }

  registerToken = async () => {
    NetInfo.netstatus(async isConnected => {
      if(isConnected) {
        const USERPROFILE = await DB.profile()
        const fcmToken = await DB.get('fcmToken')
        const isTokenRegister = await DB.get('is_token_register')
        if(fcmToken == undefined || fcmToken == null) return
        if(isTokenRegister == 'true') return;
        REQUEST("fcm_register", "post", {}, {}, {
          token: fcmToken,
          c_number: USERPROFILE.data.card_number
        }, function(res){
          console.log(res)
          let isRegister = res.newFcmToken.c_number != undefined && res.newFcmToken.token != undefined ? 'true' : 'false'
          DB.set('is_token_register', isRegister, onSuccess => {}, onError => {})
        }, function(error){
          DB.set('is_token_register', 'false', onSuccess => {}, onError => {})
          console.log(error)
        })
      }
    })
  }

  init = () => {
    NetInfo.netstatus(async isConnected => {
      if(isConnected) {
        this.registerToken()
        const isGuest = await DB.get('is_guest')
        if(isGuest == 'true') {
          this.loadIsGuest()
          return
        }
        if(this.state.refresh) {
          this.loadMainDetails()
          this.setState({ refresh: false })
        } else {
          if(this.props.userinfo == undefined && this.props.userinfo == null) {
            this.loadUserProfile()
          } else {
            this.setState({ userProfile: this.props.userinfo })
          }
          if(this.props.whats_hot == undefined && this.props.promos == undefined) {
            this.loadMainDetails()
          } else {
            this.setState({ whatsHot: this.props.whats_hot, promos: this.props.promos, loading: false })
          }
        }
        this.loadNotifications()
      } else {
        this.setState({ loading: false })
        Elements.nointernet2()
      }
    })
    this.initNotifications()
  }

  initNotifications = () => {
    this.unsubscribe = messaging().onMessage(async remoteMessage => {
      setTimeout(async () => {
        if(Platform.OS == 'ios'){
          let allnotifs = await DB.get("notifications")
          let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
          this.setState({ notifications: notifs, notificationindex: 0 })
          console.log("A new notification has recieved on home page", notifications, allnotifs)
        }else{
          let allnotifs = await DB.get("notifications")
          let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
          this.setState({ notifications: notifs, notificationindex: 0 })
          console.log("A new notification has recieved on home page", notifications)
        }
      }, 300);
    })
  }

  loadUserProfile = async () => {
    const SESSION = await DB.session()
    this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(res => {
      this.setState({ userProfile: res })
      DB.updateProfile(res, function(){}, function(error){})
    })
  }

  loadGetCurrentLocationPromo = (SESSION, successCallback, errorCallback) => {
    if(this.state.coordinates == undefined) return
    const { longitude, latitude } = this.state.coordinates
    REQUEST("promo_gps", "post", {
      Authorization: SESSION.token
    }, {}, {
      lcard_uuid: SESSION.user.lcard_uuid,
      longitude: longitude,
      latitude: latitude
    }, function(res){
      successCallback(res.data)
    }, function(error){
      errorCallback(error)
    })
  }

  loadMainDetails = async () => {
    const SESSION = await DB.session()
    const USERPROFILE = await DB.profile()
    try{
      this.props.saveWhatshot({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
        this.setState({ whatsHot: res })
      })
      .catch(error => {})
      this.props.savePromos({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
        this.setState({ promos: res })
      })
      .catch(error => {})
      this.setState({ session: SESSION, userProfile: USERPROFILE, loading: false })
    } catch(error) {
      this.setState({ loading: false })
    }
  }

  loadIsGuest = async () => {
    this.setState({ isGuest: true, loading: false })
    this.props.saveGuestWhatshot().then(res => {
      this.setState({ whatsHot: res })
    })
    .catch(error => {})
    this.props.saveGuestPromos().then(res => {
      this.setState({ promos: res })
    })
    .catch(error => {})
    this.setState({ userProfile: {} })
  }

  onBackPress = () => {
    let listener = setInterval(() => {
      backPressDuration += 1
      if(backPressDuration >= 15){
        backPressCount = 0
        backPressDuration = 0
        clearInterval(listener)
      }
    }, 100)
    backPressCount += 1
    console.log("Back Press Count", backPressCount, typeof backPressCount)
    if(backPressCount == 2){
      backPressCount = 0
      backPressDuration = 0
      BackHandler.exitApp()
      return false
    }else{
      ToastAndroid.show("Press back again to exit.", ToastAndroid.SHORT)
      return true
    }
  }

  softLoad = async () => {
    NetInfo.netstatus(async isConnected => {
      if(isConnected){
        this.setState({ loading: true })
        if(this.state.isGuest == 'true'){
          this.loadIsGuest()
          return
        }
        const SESSION = await DB.session()
        this.props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(res => {
          this.setState({ userProfile: res, loading: false })
          DB.updateProfile(res, function(){}, function(error){})
        })
        .catch(error => {})
      }else{
        this.setState({ loading: false })
        Elements.nointernet2()
      }
    })
  }

  loadNotifications = async () => {
    if(!this.displayBanner) {
      const SESSION = await DB.session()
      this.loadGetCurrentLocationPromo(SESSION, success => {
        this.setState({ promogps: success, showpromogps: true, promogpsindex: 0 })
        this.displayBanner = true
      }, error => {
        console.log(error)
        this.setState({ showpromogps: false })
        this.displayBanner = false
      })
    }

    // let timeout = setTimeout(() => {
    //   this.getNotifications()
    //   clearTimeout(timeout)
    // }, 3000);
  }
  
  getNotifications = async () => {
    let allnotifs = await DB.get("notifications")
    let notifs = allnotifs ? JSON.parse(allnotifs) : this.state.notifications
    this.setState({ notifications: notifs })
  }

  getPromoDiscountNotifications = async () => {
    const USERPROFILE = await DB.profile()
    const fcmToken = await DB.get('fcmToken')
    this.setState({ notifications: [], notificationindex: 0 })
    REQUEST("account_fcm", "get", 
    {}, {
        noID: true,
        value: `${USERPROFILE.data.card_number}/${fcmToken}`
    }, {}, 
    async (res) => {
      let notifications = JSON.parse(res.notifs)
      if(notifications.length > 0) {
          let newNotifications = notifications.map((notif,index) => {
              notif.visible = true
              return notif
          })
          let jsonNotifs = JSON.stringify(newNotifications)
          await DB.set('notifications', jsonNotifs, onSuccess => console.log(onSuccess), onError => console.log(onError))
      }
      this.setState({ notifications: notifications, notificationindex: 0 })
    }, function(error){
      console.log(error)
    })
  }

  clearNotificationPromotionBanner = async (notificationID, lastFcmToken) => {
    const USERPROFILE = await DB.profile()
    REQUEST("account_fcm", "put", 
    {}, {}, {
      notif_id: notificationID,
      c_number: USERPROFILE.data.card_number,
      token: lastFcmToken
    }, 
    function(res){
        console.log(res)
    }, function(error){
        console.log(error)
    })
  }

  renderPromos() {
    return this.state.promos.map((promo, index) => {
      return (
        <Elements.card
          key={index}
          disabled={0} 
          title={promo.title || 'Unioil'} 
          onPress={() => {
            this.navigate('PromoDetails', {data: promo, type: "promo", onBackPress: this.softLoad});
          }} 
          image={{uri: promo.image}} />)
    })
  }
  
  renderPromoGPS() {
    if(!this.state.promogps || this.state.promogps.length == 0) return null
    return this.state.promogps.map((promo, i) => {
      return <Elements.promoGPS
          key={i} 
          visible={this.state.showpromogps}
          title={promo.title}
          image={{uri: promo.image}}
          onDismiss={() => {
            this.setState({ promogpsindex: this.state.promogpsindex + 1, showpromogps: false })
            // this.getNotifications()
          }}
          onOpen={() => {
            this.setState({ showpromogps: false })
            this.navigate('PromoDetails', {data: promo, type: "promogps", onBackPress: this.softLoad});
          }}
        />
    })
  }

  updateNotifications = async (index) => {
    let nfcopy = this.state.notifications
    nfcopy[index].visible = false
    this.setState({ notifications: nfcopy, notificationindex: this.state.notificationindex + 1 })
    await DB.set("notifications", JSON.stringify(nfcopy), (res) => console.log(res), (e) => console.log(e))
    const fcmToken = await DB.get('fcmToken')
    this.clearNotificationPromotionBanner(nfcopy[index].id, fcmToken)
  }

  renderNotifications() {
    if(!this.state.notifications || this.state.notifications.length == 0) return null
    return this.state.notifications.map((notif, index) => this.state.notificationindex === index && 
      <Elements.notification
        key={index}
        visible={notif.visible}
        title={notif.subject}
        message={notif.content}
        onClose={async () => {
          this.updateNotifications(index)
        }}
        onDismiss={async () => {
          this.updateNotifications(index)
        }}
      />
    )
  }

  render() {
    return (
      <View style={{flex: 1, height: '100%'}}>
        <CustomSafeArea>
          {this.renderNotifications()}
          <Elements.loader visible={this.state.loading} /> 

          {this.state.isGuest ? <GuestHeader 
            navigation={this.props.navigation}
            reload={this.loadIsGuest}
          /> : null}

          {this.state.loading && !this.state.isGuest ? <EmptyHeader 
            navigation={this.props.navigation}
            reload={this.softLoad}
          /> : !this.state.isGuest ?
          <CustomHeader 
            title="" 
            banner={true} 
            menu={true} 
            navigation={this.props.navigation}
            reload={this.softLoad} 
          /> : null }
          
          <ScrollView
            showsHorizontalScrollIndicator={false}
            showsVerticalScrollIndicator={false}
            contentContainerStyle={{
              flexGrow: 1,
              padding: 15
            }}
            refreshControl={
              <RefreshControl refreshing={this.state.loading} onRefresh={() => {
                this.setState({ refresh: true })
                this.init()
              }} />
            }>
            {this.state.whatsHot.length > 0 && (<Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>WHAT'S HOT?</Text>)}
            <View style={{width: '100%', height: Theme.screen.h / 3.29, padding: 20, paddingHorizontal: 15, justifyContent: 'center', alignItems: 'center'}}>
              <SliderBox
                images={this.state.whatsHot}
                autoplay={true}
                circleLoop={true}
                resizeMode={"stretch"}
                dotColor={Theme.colors.primary}
                inactiveDotColor={Theme.colors.gray}
                paginationBoxVerticalPadding={0}
                paginationBoxStyle={{bottom: -15}}
                parentWidth={Theme.screen.w - 40}
                ImageComponentStyle={{borderRadius: 10}}
              />
            </View>
            {this.state.promos.length > 0 && (<Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>PROMOS</Text>)}
            <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', width: '100%', padding: 0, marginTop: 15, marginBottom: 15, justifyContent: 'center'}}>  
              {this.renderPromos()}
            </View>
            {this.renderPromoGPS()}
          </ScrollView>
        </CustomSafeArea>
      </View>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    userinfo: state.appUserInfoReducer.userinfo,
    token: state.appUserInfoReducer.token,
    whats_hot: state.appWhatshotAndPromosReducer.whats_hot,
    promos: state.appWhatshotAndPromosReducer.promos
  }
}

const mapDispatchToProps = {
  saveWhatshot,
  savePromos,
  saveGuestWhatshot,
  saveGuestPromos,
  saveUserInfo
}

export default connect(mapStateToProps, mapDispatchToProps)(Home)

// const Home = (props) => {

//   const navigate = (screen, params) => { props.navigation.navigate(screen, params) }
//   const whats_hot = (props.whats_hot != undefined && props.whats_hot.length > 0) ? props.whats_hot : []
//   const whats_promos = (props.promos != undefined && props.promos.length > 0) ? props.promos : []
//   const [loading, setloading] = useState(true)
//   const [refresh, setRefresh] = useState(false)
//   const [connected, setconnection] = useState(false)
//   const [infodialog, setinfodialog] = useState(true)
//   const [promos, setpromos] = useState(whats_promos)
//   const [promogps, setpromogps] = useState([])
//   const [showpromogps, setshowpromogps] = useState(false)
//   const [promogpsindex, setpromogpsindex] = useState(null)
//   const [_carousel, setcarousel] = useState("")
//   const [whatsHot, setwhatsHot] = useState(whats_hot)
//   const [activeSlide, setactiveSlide] = useState(0)
//   const [session, setsession] = useState(null)
//   const [userProfile, setUserProfile] = useState({})
//   const [notifications, setnotifications] = useState([])
//   const [isGuest, setisGuest] = useState(false)
//   var backPressCount = 0
//   var backPressDuration = 0

//   const loadUserProfile = async () => {
//     const SESSION = await DB.session()
//     props.saveUserInfo({ token: SESSION.token, card_number: SESSION.user.card_number  }).then(res => {
//       setUserProfile(res)
//     })
//   }

//   const load = async () => {
//     const SESSION = await DB.session()
//     const USERPROFILE = await DB.profile()
//     const isGuest = await DB.get('is_guest')
    
//     if(isGuest == 'true'){
//       loadIsGuest()
//       return
//     }
    
//     try{
//       await setsession(SESSION)
//       await setUserProfile(USERPROFILE)
//       props.saveWhatshot({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
//         setwhatsHot(res)
//       })
//       props.savePromos({ token: SESSION.token, lcard_uuid: `lcard_uuid=${SESSION.user.lcard_uuid}` }).then(res => {
//         setpromos(res)
//       })

//       Geolocation.getCurrentPosition(
//         info => {
//           REQUEST("promo_gps", "post", {
//             Authorization: SESSION.token
//           }, {}, {
//             lcard_uuid: SESSION.user.lcard_uuid,
//             longitude: info.coords.longitude,
//             latitude: info.coords.latitude
//           }, function(res){
//             setpromogps(res.data)
//             setshowpromogps(true)
//           }, function(error){
//             console.log(error)
//           })
//         },
//         error => console.log(error)
//       )
//       await setloading(false)

//     } catch(error) {
//       setloading(false)
//     }
//     loadNotifications()
//   }

//   const loadIsGuest = async () => {
//     setisGuest(true)
//     setloading(false)
//     await REQUEST("promos", "get", {}, {}, {}, 
//       function(res){
//       if(res.status == 1 && res.data.length > 0){
//         let wh = []
//         for(var x=0;x<res.data.length;x++){
//           if(res.data[x].image.includes("mobiletestbuckethttps")){
//             wh.push(res.data[x].image.replace("https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket", ""))        
//           }else{
//             wh.push(res.data[x].image)
//           }          
//         }
//         setwhatsHot(wh)
//         console.log("WHATS HOT", wh)
//       }else{
//         console.log(res.message, res.data)
//       }
//       }, function(error){  
//       console.log(error)
//     })
//     await REQUEST("new_promos", "get", {}, {}, {}, 
//       function(res){
//           if(res.status == 1 && res.data.length > 0){
//             setpromos(res.data)
//           }else{
//             console.log(res.message, res.data)
//           }
//         }, function(error){  
//           console.log(error)
//     })
//     await setUserProfile({})
//   }

//   const init = () => {
//     NetInfo.netstatus(isConnected => {
//       if(isConnected) {
//         if(refresh) {
//           load()
//           setRefresh(false)
//         } else {
//           if(props.userinfo == undefined && props.userinfo == null) {
//             loadUserProfile()
//           } else {
//             setUserProfile(props.userinfo)
//           }
//           if(props.whats_hot == undefined && props.promos == undefined) {
//             load()
//           } else {
//             setloading(false)
//           }
//         }
//       } else {
//         setloading(false)
//         Elements.nointernet2()
//       }
//     })
//   }

//   const onBackPress = () => {
//     let listener = setInterval(() => {
//       backPressDuration += 1
//       if(backPressDuration >= 15){
//         backPressCount = 0
//         backPressDuration = 0
//         clearInterval(listener)
//       }
//     }, 100)
//     backPressCount += 1
//     console.log("Back Press Count", backPressCount, typeof backPressCount)
//     if(backPressCount == 2){
//       backPressCount = 0
//       backPressDuration = 0
//       BackHandler.exitApp()
//       return false
//     }else{
//       ToastAndroid.show("Press back again to exit.", ToastAndroid.SHORT)
//       return true
//     }
//   }

//   useEffect(() => {
//     BackHandler.addEventListener('hardwareBackPress', onBackPress)
//     return () => {
//       BackHandler.removeEventListener('hardwareBackPress', onBackPress)
//     }
//   }, [])

//   const softLoad = async () => {
//     NetInfo.fetch().then(async state => {
//       console.log("Connection type", state.type);
//       console.log("Is connected?", state.isConnected);
//       if(state.isConnected){
//         setloading(true)
//         if(isGuest == 'true'){
//           loadIsGuest()
//           return
//         }
//         const SESSION = await DB.session()
//         await REQUEST("user_profile", "get", {
//           Authorization: SESSION.token,
//           card_number: SESSION.user.card_number 
//         }, {}, {}, function(data){
//           console.log("FETCH USER PROFILE");
//           if(data.status == 1){
//           DB.updateProfile(data, function(){
//             console.log("USER PROFILE SAVED! ")
//             setUserProfile(data)
//             }, function(error){
//               console.log("Error saving profile", error)
//             })
//           }
//           setloading(false)
//         }, function(error){
//           setloading(false)  
//           console.log(error)
//         })
//       }else{
//         setloading(false)
//         Elements.nointernet2()
//       }
//     })
//   }

//   useEffect(() => {
//     init()
//     console.log("LOAD DATA");
//   }, [])

  
//   const loadNotifications = async () => {
//     let allnotifs = await DB.get("notifications")
//     let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
//     await setnotifications(notifs)
//   }

//   useEffect(() => {
//     const unsubscribe = messaging().onMessage(async remoteMessage => {
//       setTimeout(async () => {
//         if(Platform.OS == 'ios'){
//           let allnotifs = await DB.get("notifications")
//           let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
//           await setnotifications(notifs)
//           console.log("A new notification has recieved on home page", notifications, allnotifs)
//         }else{
//           let allnotifs = await DB.get("notifications")
//           let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
//           await setnotifications(notifs)
//           console.log("A new notification has recieved on home page", notifications)
//         }
//       }, 300);
//     })
//     return unsubscribe;
//   }, []);  

//   const validate = async (tkn) => {
//     const SESSION = await DB.session()
//     if(!SESSION.token){
//       alert("You are not logged in!");
//       setloading(false)
//       props.navigation.navigate("Login")
//     }
//   }

//   const renderwhatsHot = ({item, index}) => {
//     return (
//       <View key={index} style={{flex: 1}}>
//         <Image source={item.image} style={{width: '100%', height: Theme.screen.h / 2.8 - 60, borderRadius: 20, resizeMode: 'stretch'}} />
//       </View>)
//   }

//   const renderPromos = () => {
//     return promos.map((promo, index) => {
//       return (
//         <Elements.card
//           key={index}
//           disabled={0} 
//           title={promo.title || 'DIXIE'} 
//           onPress={() => {
//             console.log("CLICKED!!!")
//             navigate('PromoDetails', {data: promo, type: "promo", onBackPress: softLoad});
//           }} 
//           image={{uri: promo.image}} />)
//     })
//   }
  
//   const renderPromoGPS = () => {
//     if(!promogps || promogps.length == 0) return null
//     return promogps.map((promo, i) => {
//       return <Elements.promoGPS
//           key={i} 
//           visible={showpromogps}
//           title={promo.title}
//           image={{uri: promo.image}}
//           onDismiss={() => {
//             setpromogpsindex(i)
//             setshowpromogps(false)
//           }}
//           onOpen={() => {
//             setshowpromogps(false)
//             navigate('PromoDetails', {data: promo, type: "promogps", onBackPress: softLoad});
//           }}
//         />
//     })
//   }

//   const renderNotifications = () => {
//     return notifications.map((notif, index) => {
//       return <Elements.notification
//         key={index}
//         visible={notif.visible}
//         title={notif.title}
//         message={notif.body}
//         onClose={async () => {
//           let nfcopy = notifications
//           nfcopy[index].visible = false
//           await setnotifications([])
//           await setnotifications(nfcopy)
//           await DB.set("notifications", JSON.stringify(nfcopy), (res) => console.log(res), (e) => console.log(e))
//           console.log("Close notification triggered")
//         }}
//         onDismiss={async () => {
//           let nfcopy = notifications
//           nfcopy[index].visible = false
//           await setnotifications([])
//           await setnotifications(nfcopy)
//           console.log("Dismissed")
//         }}
//       />
//     })
//   }

//   return (
//     <View style={{flex: 1, height: '100%'}}>
//       <SafeAreaView style={{flex: 1}}>
//         {renderNotifications()}
//         <Elements.loader visible={loading} /> 

//         {isGuest ? <GuestHeader 
//           navigation={props.navigation}
//           reload={loadIsGuest}
//         /> : null}

//         {loading && !isGuest ? <EmptyHeader 
//           navigation={props.navigation}
//           reload={softLoad}
//         /> : !isGuest ?
//         <CustomHeader 
//           title="" 
//           banner={true} 
//           menu={true} 
//           navigation={props.navigation}
//           reload={softLoad} 
//         /> : null }
        
//         <ScrollView
//           showsHorizontalScrollIndicator={false}
//           showsVerticalScrollIndicator={false}
//           contentContainerStyle={{
//             flexGrow: 1,
//             padding: 15
//           }}
//           refreshControl={
//             <RefreshControl refreshing={loading} onRefresh={() => {
//               setRefresh(true)
//               init()
//             }} />
//           }>
//           <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>WHAT'S HOT?</Text>
//           <View style={{width: '100%', height: Theme.screen.h / 3.29, padding: 20, paddingHorizontal: 15, justifyContent: 'center', alignItems: 'center'}}>
//             <SliderBox
//               images={whatsHot}
//               autoplay={true}
//               circleLoop={true}
//               resizeMode={"stretch"}
//               dotColor={Theme.colors.primary}
//               inactiveDotColor={Theme.colors.gray}
//               parentWidth={Theme.screen.w - 40}
//               ImageComponentStyle={{borderRadius: 10}}
//             />
//           </View>
//           <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>PROMOS</Text>
//           <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', width: '100%', padding: 0, marginTop: 15, marginBottom: 15, justifyContent: 'center'}}>  
//             {renderPromos()}
//           </View>
//           {renderPromoGPS()}
//         </ScrollView>
//       </SafeAreaView>
//     </View>
//   );
// }

// const mapStateToProps = (state) => {
//   console.log(state);
//   return {
//     userinfo: state.appUserInfoReducer.userinfo,
//     whats_hot: state.appWhatshotAndPromosReducer.whats_hot,
//     promos: state.appWhatshotAndPromosReducer.promos
//   }
// }

// const mapDispatchToProps = {
//   saveWhatshot,
//   savePromos,
//   saveUserInfo
// }

// export default connect(mapStateToProps, mapDispatchToProps)(Home)




// export default function Home(navigation) {

//   const navigate = (screen, params) => { navigation.navigation.navigate(screen, params) }
//   const [loading, setloading] = useState(true);
//   const [connected, setconnection] = useState(false);
//   const [infodialog, setinfodialog] = useState(true);
//   const [promos, setpromos] = useState([]);
//   const [promogps, setpromogps] = useState([]);
//   const [showpromogps, setshowpromogps] = useState(false)
//   const [promogpsindex, setpromogpsindex] = useState(null)
//   const [_carousel, setcarousel] = useState("");
//   const [whatsHot, setwhatsHot] = useState([]);
//   const [activeSlide, setactiveSlide] = useState(0);
//   const [session, setsession] = useState(null);
//   const [userProfile, setUserProfile] = useState({});
//   const [notifications, setnotifications] = useState([]);
//   const [isGuest, setisGuest] = useState(false)
//   var backPressCount = 0
//   var backPressDuration = 0

//   var sampledata = {}
//   // var sampledata = {"data": {"address": "", "birthdate": "January 01, 1990", "card_bg_image": "https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket/mobileapp/cardTypes_bg_image/1582093000.jpg", "card_black_label": 0, "card_code": "PUVCARD", "card_image": "https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket/mobileapp/cardTypes/1582093256.jpg", "card_number": "1119000000000020", "card_type": "PASADANG UNIOIL VALUE CARD", "city_name": "", "civilstatus_code": "SE", "email": "bry.rnr@gmail.com", "expiry_date": "2023-02-07", "firstname": "RNR", "fueltype_code": "0", "gender_code": "F", "lastname": "PUV", "lcard_uuid": "5fd8f34c-49ca-11ea-9ba4-02189255205c", "middlename": "", "mobile": "639957951241", "photo": "https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket/mobileapp/memberPhoto/1581094497.jpg", "pin": "03444748", "points": 1600, "vo_code": "0"}, "message": "Success", "retrieved": {"address": "", "card_number": "1119000000000020", "card_type_code": "PUVCARD", "card_type_desc": "PASADANG UNIOIL VALUE CARD", "civil_status_code": "SE", "civil_status_desc": "SEPARATED", "email": "bry.rnr@gmail.com", "first_name": "RNR", "fuel_type_code": "0", "fuel_type_desc": "NO DATA ENTERED", "gender_code": "F", "gender_desc": "FEMALE", "is_bdo": "0", "is_caltex": "0", "is_cebupacific": "0", "is_flyingv": "0", "is_happy": "0", "is_jetti": "0", "is_mabuhay": "0", "is_mercury": "0", "is_national": "0", "is_petron": "0", "is_petronv": "0", "is_phoenix": "0", "is_ptt": "0", "is_robinson": "0", "is_s&r": "0", "is_seaoil": "0", "is_shell": "0", "is_sm": "0", "is_starbucks": "0", "is_total": "0", "last_name": "PUV", "middle_initial": "", "mobile": "639957951241", "number_cars": "0", "occupation": "0", "vehicle_own_code": "0", "vehicle_own_desc": "NO DATA ENTERED"}, "status": 1}

//   // async function requestUserPermission() {
//   //   const authStatus = await messaging().requestPermission();

//   //   if (authStatus) {
//   //     console.log('Permission status:', authStatus);
//   //   }
//   //   // const enabled =
//   //   //   authStatus === AuthorizationStatus.AUTHORIZED || authStatus === AuthorizationStatus.PROVISIONAL;

//   //   // if (enabled) {
//   //   //   console.log('Firebase Notification Authorization status:', authStatus);
//   //   // }
//   // }

//   const load = async () => {

//     const SESSION = await DB.session()
//     const USERPROFILE = await DB.profile()
//     const isGuest = await DB.get('is_guest')
    
//     if(isGuest == 'true'){
//       loadIsGuest()
//       return
//     }
    
//     try{

//       setloading(true)
//       await setsession(SESSION)
//       await setUserProfile(USERPROFILE)
//       // await validate()
//       await REQUEST("user_profile", "get", {
//           Authorization: SESSION.token,
//           card_number: SESSION.user.card_number 
//         }, {}, {}, function(data){
//           console.log("FETCH USER PROFILE");
//           if(data.status == 1){
//             DB.updateProfile(data, function(){
//               console.log("USER PROFILE SAVED! ", data)
//               setUserProfile(data)
//             }, function(error){
//               console.log("Error saving profile", error)
//             })
//           }
//         }, function(error){  
//           console.log(error)
//       })
//       await REQUEST("whats_hot", "get", {
//           Authorization: SESSION.token,
//         }, `lcard_uuid=${SESSION.user.lcard_uuid}`, {}, 
//         function(res){
//           if(res.status == 1 && res.data.length > 0){
//             let wh = []
//             for(var x=0;x<res.data.length;x++){
//               if(res.data[x].image.includes("mobiletestbuckethttps")){
//                 wh.push(res.data[x].image.replace("https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket", ""))        
//               }else{
//                 wh.push(res.data[x].image)
//               }
//             }
//             setwhatsHot(wh)
//             console.log("WHATS HOT", whatsHot)
//           }else{
//             console.log(res.message, res.data)
//           }
//         }, function(error){  
//           console.log(error)
//       })
//       await REQUEST("new_promos", "get", {}, `lcard_uuid=${SESSION.user.lcard_uuid}`, {}, 
//         function(res){
//           if(res.status == 1 && res.data.length > 0){
//             setpromos(res.data)
//           }else{
//             console.log(res.message, res.data)
//           }
//         }, function(error){  
//           console.log(error)
//       })
//       Geolocation.getCurrentPosition(
//         info => {
//           REQUEST("promo_gps", "post", {
//             Authorization: SESSION.token
//           }, {}, {
//             lcard_uuid: SESSION.user.lcard_uuid,
//             longitude: info.coords.longitude,
//             latitude: info.coords.latitude
//           }, function(res){
//             setpromogps(res.data)
//             setshowpromogps(true)
//           }, function(error){
//             console.log(error)
//           })
//         },
//         error => {
//           console.log(error)
//         }
//       )
//       await setloading(false)

//     }catch(error){
//       console.log(error)
//       setloading(false)
//     }

//     loadNotifications()

//   }

//   const loadIsGuest = async () => {
//     setisGuest(true)
//     setloading(false)
//     await REQUEST("promos", "get", {}, {}, {}, 
//       function(res){
//       if(res.status == 1 && res.data.length > 0){
//         let wh = []
//         for(var x=0;x<res.data.length;x++){
//           if(res.data[x].image.includes("mobiletestbuckethttps")){
//             wh.push(res.data[x].image.replace("https://s3-ap-southeast-1.amazonaws.com/unioil.mobiletestbucket", ""))        
//           }else{
//             wh.push(res.data[x].image)
//           }          
//         }
//         setwhatsHot(wh)
//         console.log("WHATS HOT", wh)
//       }else{
//         console.log(res.message, res.data)
//       }
//       }, function(error){  
//       console.log(error)
//     })
//     await REQUEST("new_promos", "get", {}, {}, {}, 
//       function(res){
//           if(res.status == 1 && res.data.length > 0){
//             setpromos(res.data)
//           }else{
//             console.log(res.message, res.data)
//           }
//         }, function(error){  
//           console.log(error)
//     })
//     await setUserProfile({})
//   }

//   const init = () => {
//     NetInfo.fetch().then(state => {
//       console.log("Connection type", state.type);
//       console.log("Is connected?", state.isConnected);
//       if(state.isConnected){
//         load()
//       }else{
//         setloading(false)
//         Elements.nointernet2()
//       }
//     });
//   }

//   const onBackPress = () => {
//     let listener = setInterval(() => {
//       backPressDuration += 1
//       if(backPressDuration >= 15){
//         backPressCount = 0
//         backPressDuration = 0
//         clearInterval(listener)
//       }
//     }, 100)
//     backPressCount += 1
//     console.log("Back Press Count", backPressCount, typeof backPressCount)
//     if(backPressCount == 2){
//       backPressCount = 0
//       backPressDuration = 0
//       BackHandler.exitApp()
//       return false
//     }else{
//       ToastAndroid.show("Press back again to exit.", ToastAndroid.SHORT)
//       return true
//     }
//   }

//   useEffect(() => {
//     BackHandler.addEventListener('hardwareBackPress', onBackPress)
//     return () => {
//       BackHandler.removeEventListener('hardwareBackPress', onBackPress)
//     }
//   }, [])

//   const softLoad = async () => {
//     NetInfo.fetch().then(async state => {
//       console.log("Connection type", state.type);
//       console.log("Is connected?", state.isConnected);
//       if(state.isConnected){
//         setloading(true)
//         if(isGuest == 'true'){
//           loadIsGuest()
//           return
//         }
//         const SESSION = await DB.session()
//         await REQUEST("user_profile", "get", {
//           Authorization: SESSION.token,
//           card_number: SESSION.user.card_number 
//         }, {}, {}, function(data){
//           console.log("FETCH USER PROFILE");
//           if(data.status == 1){
//           DB.updateProfile(data, function(){
//             console.log("USER PROFILE SAVED! ")
//             setUserProfile(data)
//             }, function(error){
//               console.log("Error saving profile", error)
//             })
//           }
//           setloading(false)
//         }, function(error){
//           setloading(false)  
//           console.log(error)
//         })
//       }else{
//         setloading(false)
//         Elements.nointernet2()
//       }
//     })
//   }

//   useEffect(() => {
//     init()
//     console.log("LOAD DATA");
//   }, [])

  
//   const loadNotifications = async () => {

//     //RESET NOTIFICATIONS
//     // await DB.remove("notifications")
     
//     let allnotifs = await DB.get("notifications")
//     let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
//     await setnotifications(notifs)
//     // console.log("Notifications", notifs)
//   }

//   useEffect(() => {
//     const unsubscribe = messaging().onMessage(async remoteMessage => {
//       setTimeout(async () => {
//         if(Platform.OS == 'ios'){
//           let allnotifs = await DB.get("notifications")
//           let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
//           await setnotifications(notifs)
//           console.log("A new notification has recieved on home page", notifications, allnotifs)
//         }else{
//           let allnotifs = await DB.get("notifications")
//           let notifs = allnotifs ? JSON.parse(allnotifs) : notifications
//           await setnotifications(notifs)
//           console.log("A new notification has recieved on home page", notifications)
//         }
//       }, 300);
//     })
//     return unsubscribe;
//   }, []);  

//   const validate = async (tkn) => {
//     const SESSION = await DB.session()
//     if(!SESSION.token){
//       alert("You are not logged in!");
//       setloading(false)
//       navigation.navigation.navigate("Login")
//     }
//   }

//   const renderwhatsHot = ({item, index}) => {
//     return (
//       <View key={index} style={{flex: 1}}>
//         <Image source={item.image} style={{width: '100%', height: Theme.screen.h / 2.8 - 60, borderRadius: 20, resizeMode: 'stretch'}} />
//       </View>)
//   }

//   const renderPromos = () => {
//     return promos.map((promo, index) => {
//       return (
//         <Elements.card
//           key={index}
//           disabled={0} 
//           title={promo.title || 'DIXIE'} 
//           onPress={() => {
//             console.log("CLICKED!!!")
//             navigate('PromoDetails', {data: promo, type: "promo", onBackPress: softLoad});
//           }} 
//           image={{uri: promo.image}} />)
//     })
//   }
  
//   const renderPromoGPS = () => {
//     if(!promogps || promogps.length == 0) return null
//     return promogps.map((promo, i) => {
//       return <Elements.promoGPS
//           key={i} 
//           visible={showpromogps}
//           title={promo.title}
//           image={{uri: promo.image}}
//           onDismiss={() => {
//             setpromogpsindex(i)
//             setshowpromogps(false)
//           }}
//           onOpen={() => {
//             setshowpromogps(false)
//             navigate('PromoDetails', {data: promo, type: "promogps", onBackPress: softLoad});
//           }}
//         />
//     })
//   }

//   const renderNotifications = () => {
//     return notifications.map((notif, index) => {
//       return <Elements.notification
//         key={index}
//         visible={notif.visible}
//         title={notif.title}
//         message={notif.body}
//         onClose={async () => {
//           let nfcopy = notifications
//           nfcopy[index].visible = false
//           await setnotifications([])
//           await setnotifications(nfcopy)
//           await DB.set("notifications", JSON.stringify(nfcopy), (res) => console.log(res), (e) => console.log(e))
//           console.log("Close notification triggered")
//           // console.log("tried to close notification", notifications)
//         }}
//         onDismiss={async () => {
//           let nfcopy = notifications
//           nfcopy[index].visible = false
//           await setnotifications([])
//           await setnotifications(nfcopy)
//           console.log("Dismissed")
//         }}
//       />
//     })
//   }

//   return (
//     <View style={{flex: 1, height: '100%'}}>
//       <SafeAreaView style={{flex: 1}}>
//         {renderNotifications()}
//         <Elements.loader visible={loading} /> 

//         {isGuest ? <GuestHeader 
//           navigation={navigation}
//           reload={loadIsGuest}
//         /> : null}

//         {loading && !isGuest ? <EmptyHeader 
//           navigation={navigation}
//           reload={softLoad}
//         /> : !isGuest ?
//         <CustomHeader 
//           title="" 
//           banner={true} 
//           menu={true} 
//           navigation={navigation}
//           reload={softLoad} 
//         /> : null }
        
//         <ScrollView
//           showsHorizontalScrollIndicator={false}
//           showsVerticalScrollIndicator={false}
//           contentContainerStyle={{
//             flexGrow: 1,
//             padding: 15
//           }}
//           refreshControl={
//             <RefreshControl refreshing={loading} onRefresh={init} />
//           }>
//           <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>WHAT'S HOT?</Text>
//           <View style={{width: '100%', height: Theme.screen.h / 2.57, padding: 20, paddingHorizontal: 15, justifyContent: 'center', alignItems: 'center'}}>
//             <SliderBox
//               images={whatsHot}
//               autoplay={true}
//               circleLoop={true}
//               resizeMode={"stretch"}
//               dotColor={Theme.colors.primary}
//               inactiveDotColor={Theme.colors.gray}
//               parentWidth={Theme.screen.w - 40}
//               ImageComponentStyle={{borderRadius: 10}}
//             />
//           </View>
//           <Text style={{color: 'gray', fontFamily: 'Arial', fontWeight: 'bold', marginBottom: 0}}>PROMOS</Text>
//           <View style={{flex: 1, flexDirection: 'row', flexWrap: 'wrap', width: '100%', padding: 0, marginTop: 15, marginBottom: 15, justifyContent: 'center'}}>  
//             {renderPromos()}
//           </View>
//           {renderPromoGPS()}
//         </ScrollView>
//       </SafeAreaView>
//     </View>
//   );
// }

//   // useEffect(() => {
//   //   setnotifications([{
//   //     title: "Unioil",
//   //     body: "Welcome to Unioil Loyalty App",
//   //     visible: true
//   //   },{
//   //     title: "Membership",
//   //     body: "Redeem points and use your points to buy our products",
//   //     visible: true
//   //   }])
//   // }, [])

// /*
//     // await setpromos([
//     //   {
//     //     title: 'Dixie Ganda',
//     //     image: Assets.test.dixie[Math.floor(Math.random() * Assets.test.dixie.length - 1)],
//     //     description: 'asd asd'
//     //   },
//     //   {
//     //     title: 'Ganda Dixie',
//     //     image: Assets.test.dixie[Math.floor(Math.random() * Assets.test.dixie.length - 1)],
//     //     description: 'asd asdasdasd'
//     //   }
//     // ])
//     // await setwhatsHot([
//     //   {
//     //     title: 'Dixie Ganda',
//     //     image: Assets.test.zuvapit[Math.floor(Math.random() * Assets.test.zuvapit.length - 1)],
//     //     description: 'asd asd'
//     //   },
//     //   {
//     //     title: 'Ganda Dixie',
//     //     image: Assets.test.mina[Math.floor(Math.random() * Assets.test.mina.length - 1)],
//     //     description: 'asd asdasdasd'
//     //   },
//     //   {
//     //     title: 'Ganda Dixie',
//     //     image: Assets.test.zuvapit[Math.floor(Math.random() * Assets.test.zuvapit.length - 1)],
//     //     description: 'asd asdasdasd'
//     //   },
//     //   {
//     //     title: 'Ganda Dixie',
//     //     image: Assets.test.mina[Math.floor(Math.random() * Assets.test.mina.length - 1)],
//     //     description: 'asd asdasdasd'
//     //   }
//     // ])

//     {/* <Elements.card
//             disabled={1} 
//             title={promos[0]?.title || 'DIXIE'} 
//             onPress={() => {
//               navigate('PromoDetails', promos[0]);
//             }} 
//             image={promos[0]?.image || Assets.dixie} />

//           <Elements.card
//             disabled={1} 
//             title={promos[1]?.title || 'DIXIE'} 
//             onPress={() => {
//               navigate('PromoDetails', promos[1]);
//             }} 
//             image={promos[1]?.image || Assets.dixie} /> }
    
// */