import * as React from 'react';
import { View, StyleSheet } from 'react-native';
import { Theme } from '../../theme/theme';
import { FHReward, FHSettings } from '../../types/types';
import { FirebaseAuthTypes } from '@react-native-firebase/auth';
import { useEffect } from 'react';
import { SafeAreaView } from 'react-native-safe-area-context';
import { constants } from '../../constants/constants';
import { useState } from 'react';
import { FirebaseFirestoreTypes } from '@react-native-firebase/firestore';
import { getUser } from '../../api/user';
import LoyaltyLeft from '../../component/LoyaltyLeft';
import LoyaltyQR from '../../component/LoyaltyQR';
import LoyaltyDeals from './LoyaltyDeals';
import LoyaltyRewards from '../../component/LoyaltyRewards';
import { listenFor } from '../../api/database';
import { authListener } from '../../api/auth';


interface LoyaltyScreenProps {
  navigation: any
}

const LoyaltyScreen = (props: LoyaltyScreenProps) => {


  // state
  const [isOpen, setIsOpen] = useState(true)
  const [xid, setXid] = useState('x')
  const [uid, setUid] = useState('x')
  const [currentPoints, setCurrentPoints] = useState(0)
  const [totalPoints, setTotalPoints] = useState(0)
  const [rewards, setRewards] = useState<FHReward[]>([])
  const [settings, setSettings] = useState<FHSettings | undefined>()
  const [uri, setUri] = useState('http://via.placeholder.com/150')

  //props
  const { navigation } = props

  //user data variable
  let uData: void | (() => void | undefined);

  //navigation
  const navigateTo = (screen: string, param?: {}): void => {
    navigation.navigate(screen, param ? param : null)
  }

  // subscription functions

  // set store to open or closed
  const isStoreOpenCallback = (data: FirebaseFirestoreTypes.DocumentData): void => {
    const storeData = data.data()
    if (storeData !== undefined) {
      setIsOpen(storeData.isOpen)
    }
  }
  // get store status
  const isStoreOpen = (): () => void => {
    return listenFor(isStoreOpenCallback, constants.dbAdmin, constants.dbAdmin)
  }

  //set sub for store status listener
  useEffect((): () => void => {
    const unsubscribe = isStoreOpen()
    return unsubscribe
  }, [])

  //code to run after we get user data
  const checkUserCallback = (data: FirebaseFirestoreTypes.DocumentData): void => {
    let userData = data.data()
    if (userData !== undefined) {
      setXid(userData.xid)
      setCurrentPoints(userData.currentPoints)
      setTotalPoints(userData.totalPoints)
    }
  }
  //check for user data
  const checkUserData = (uid: string): () => void => {
    return listenFor(checkUserCallback, constants.dbUser, uid)
  }

  //set sub for user data
  useEffect((): void | (() => void | undefined)  => {
    const user = getUser()
    if (user) {
      uData = checkUserData(user.uid)
    }
    return uData
  }, [])

  // authorization status listener
  const onAuthStateChanged = (user: FirebaseAuthTypes.User | null): void => {
    if (!user) {
      navigateTo(constants.screens.loginStack)
    } else {
      navigateTo(constants.screens.mainStack)
      setUid(user.uid)
    }
  }
  // set auth subscription
  useEffect((): () => void => {
    const unsubscribe = authListener(onAuthStateChanged)
    return unsubscribe
  }, []);



  // callback to process rewards from db
  const rewardCallback = (data: FirebaseFirestoreTypes.DocumentData): void => {
    let rewards: FHReward[] = []
    data.docs.map((item: FirebaseFirestoreTypes.DocumentData) => {
      const reward = item.data() as FHReward
      rewards.push(reward)
    })
    setRewards(rewards)
  }

  //set subscription for obtaining rewards from db
  useEffect((): () => void => {
    const rewardSub = listenFor(rewardCallback, constants.dbRewards)
    return rewardSub
  }, [])


  //callback to process settings object from db
  const settingsCallback = (data: FirebaseFirestoreTypes.DocumentData): void => {
    const settingsObj = data.data() as FHSettings
    if (settingsObj === undefined) return

    setSettings(settingsObj)

    //check app version
    //TODO check app version
  }

  //set settings subscriptions
  useEffect((): () => void => {
    const settings = listenFor(settingsCallback, constants.dbAdmin, constants.dbAdmin)
    return settings
  }, [])


  // screen functions


  return (

    <View style={styles.container}>
      {/* left side */}
      <LoyaltyLeft settings={settings} currentPoints={currentPoints} />
      {/* end left side */}

      {/* right side */}
      <SafeAreaView style={styles.right}>
        <View style={styles.right}>

          {/* qrcode container */}
          <LoyaltyQR uri={uri} xid={xid} currentPoints={currentPoints} totalPoints={totalPoints} />
          {/* end qrcode container */}

          {/* start deal */}
          <LoyaltyDeals navigation={navigation} xid={xid} isOpen={isOpen} />

          {/* end deals */}

          {/* rewards */}
          <LoyaltyRewards navigation={navigation} uid={uid} rewards={rewards} currentPoints={currentPoints} />
          {/* end rewards */}
        </View>
      </SafeAreaView>
      {/* end right side */}
    </View>

  );
};

export default LoyaltyScreen;

const styles = StyleSheet.create({

  container: {
    flex: 1,
    flexDirection: 'row',
    backgroundColor: Theme.secondaryColor
  },

  left: {
    flex: 1,
    margin: constants.ui.standardMargin,
    flexDirection: 'column-reverse',
    height: '100%',
    backgroundColor: Theme.whiteColor,
    borderRadius: 5,
  },

  right: {
    flex: 4,
    backgroundColor: Theme.primaryColor
  },

})