import * as React from 'react';
import { useEffect, useState } from 'react';
import { SafeAreaView, ScrollView, RefreshControl, Alert } from 'react-native';
import NetInfo from "@react-native-community/netinfo";
import CustomHeader from '../../../components/header.js';
import Elements from '../../../components/elements.js';
import Theme from '../../../components/theme.style.js';
import DB from '../../../components/storage/';
import REQUEST from '../../../components/api/';
import CustomSafeArea from '../../../components/safeArea.component.js';

export default function Promos(navigation) {

  const [loading, setloading] = useState(false);
  const [connected, setconnection] = useState(false);
  const [promos, setpromos] = useState([]);

  const init = async () => {
    setloading(true)
    setconnection(true)
    await REQUEST("promos", "get", {}, {}, {}, 
      async (res) => {
        if(res.status == 1 && res.data.length > 0){
          await setpromos(res.data)
        }
      }, function(err){  
        Alert.alert("Information", `\n${err.message}`);
    }, "Promos", "Fetch")
    await setloading(false)
  }

  useEffect(() => {
    NetInfo.fetch().then(state => {
      if(state.isConnected){
        init()
      }else{
        Elements.nointernet2(navigation)
      }
    });
  }, [])

  const renderPromos = () => {
    return promos.map((data, index) => {
      const isLastItem = index === promos.length - 1;
      
      return (
        <Elements.shadowView 
          key={`promo-${index}`}
          style={{ marginBottom: isLastItem ? 20 : 0 }}
        >
          <Elements.card
            titlealign="left"
            disabled={true}
            height={Theme.screen.w * 0.65} 
            title={data.title} 
            onPress={() => {
              navigation.navigation.navigate("PromoDetails", {
                data: data, 
                onBackPress: () => null
              });
            }} 
            image={{uri: data.image}} 
          />
        </Elements.shadowView>
      );
    });
  };

  if(!connected){
    return (
      <SafeAreaView style={{flex: 1}}>
        <CustomHeader title="Promos" menu={true} navigation={navigation} />
        <Elements.nointernet
          message="No internet found. Please check your internet connection."
          buttonText="Try Again"
          onPress={() => {
            NetInfo.fetch().then(state => { 
              if(state.isConnected){
                init()
              }else{
                Elements.nointernet2(navigation)
              }
            })
          }}
        />
      </SafeAreaView>
    )
  }

  return (
    <CustomSafeArea>
      <CustomHeader title="Promos" menu={true} navigation={navigation} />
      <ScrollView
          refreshControl={
            <RefreshControl refreshing={loading} onRefresh={init} />
          } 
          style={{flex: 1, padding: 10}}
          showsVerticalScrollIndicator={false}
        >        
          {renderPromos()}
      </ScrollView>
    </CustomSafeArea>
  );
}