import * as React from 'react';
import { 
  useState, 
  useEffect 
} from 'react';
import { 
  TouchableOpacity, 
  View, 
  Text, 
  Image 
} from 'react-native';
import { FlatGrid } from 'react-native-super-grid';
import { Box } from 'native-base';
import NetInfo from "@react-native-community/netinfo";
import CustomHeader from '../../components/header.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage/';
import REQUEST from '../../components/api/';
import Theme from '../../components/theme.style';
import CustomSafeArea from '../../components/safeArea.component.js';

export default function LoyaltyProgram(navigation) {

  const [connected, setconnected] = useState(false)
  const [loading, setloading] = useState(true)
  const [Cards, setCards] = useState([])

  const init = async () => {
    setconnected(true)
    const SESSION = await DB.session()
    await REQUEST("loyalty_cards", "get", {
        Authorization: SESSION.token,
      }, {}, {}, 
      async (res) => {
        if(res.status == 1 && res.data.length > 0){
          let l = []
          for(var x=0;x<res.data.length;x++){
            l.push({c_id: res.data[x].cardtype_id, code: res.data[x].code})
          }
          console.log(res.data[0])
          console.log("test", l)
          await setCards(await res.data)
          await setloading(false)
        }else{
          console.log(res.message, res.data)
        }
      }, function(error){  
        console.log(error)
    })
  }

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

  const NBCard = (props) => {
    return (
      <TouchableOpacity activeOpacity={1} onPress={props.onPress}>
        <Box style={{margin: 0, borderRadius: 15}}>
          <Box style={{borderRadius: 15}}>
            <Image source={{uri: props.image}} style={{borderRadius: 5, height: 100, width: null, flex: 1, resizeMode: 'stretch'}}/>
          </Box>
          <Box style={{height: 35, justifyContent: 'center'}}>
            <Text style={{alignSelf: 'center', textAlign: 'center', color: Theme.colors.textPrimary}}>{props.title}</Text>
          </Box>
        </Box>
      </TouchableOpacity>
    )
  }

  if(!connected){
    return (
      <CustomSafeArea>
      <View style={{flex: 1}}>
        <Elements.loader visible={loading} />
        <CustomHeader title="Loyalty Program" navigation={navigation} main={true} />
        <Elements.nointernet 
          message="No internet found. Please check your internet connection." 
          buttonText="Try Again" 
          onPress={() => {
            NetInfo.fetch().then(state => {
              console.log("Connection type", state.type);
              console.log("Is connected?", state.isConnected);
              if(state.isConnected){
                init()
              }else{
                Elements.nointernet2(navigation)
              }
            })
          }}
        />
      </View>
      </CustomSafeArea>
    )
  }

  return (
    <CustomSafeArea>
      <Elements.loader visible={loading} />
      <CustomHeader title="Loyalty Program" navigation={navigation} main={true} />
      <FlatGrid
          itemDimension={150}
          data={Cards}
          renderItem={({ item }) => (
            <NBCard
              image={item.image} 
              title={item.name} 
              onPress={() => {
                navigation.navigation.navigate("LoyaltyCardDetails", item)
              }} 
            />
          )}
        />
    </CustomSafeArea>
  );
}