import * as React from 'react';
import { useEffect, useContext, useState } from 'react';
import { StyleSheet, SafeAreaView, Button, View, Text, ScrollView, RefreshControl, TouchableOpacity, TouchableWithoutFeedback,  Modal } from 'react-native';
import {useNetInfo} from "@react-native-community/netinfo";
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 Assets from '../../../components/assets.manager.js';
import DB from '../../../components/storage/';
import REQUEST from '../../../components/api/';
import CustomSafeArea from '../../../components/safeArea.component.js';

export default function Promos(navigation) {

  const [modalVisible, setModalVisible] = useState(false);
  const [loading, setloading] = useState(false);
  const [connected, setconnection] = useState(false);
  const [infodialog, setinfodialog] = useState(false);
  const [session, setsession] = useState(null);
  const [promos, setpromos] = useState([]);

  const init = async () => {
    const ss = await DB.session()
    setloading(true)
    setconnection(true)
    await setsession(ss)
    await REQUEST("promos", "get", {}, {}, {}, 
      async (res) => {
        if(res.status == 1 && res.data.length > 0){
          await setpromos(res.data)
        }else{
          console.log(res.message, res.data)
        }
      }, function(error){  
        console.log(error)
    })
    await setloading(false)
  }

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

  const renderPromos = () => {
    return promos.map((data, index) => {
      return <Elements.shadowView>
        <View style={{marginBottom: index === promos.length - 1 ? 20 : 0}}>
          <Elements.card
          key={index}
          titlealign="left"
          disabled={1}
          height={Theme.screen.w * .65} 
          title={data.title || 'DIXIE'} 
          onPress={() => {
            navigation.navigation.navigate("PromoDetails", {data: data, onBackPress: () => null});
          }} 
          image={{uri: data.image}} />
        </View>
      </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 => {
              console.log("Connection type", state.type);
              console.log("Is connected?", state.isConnected);
              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>
  );
}