import * as React from 'react';
import { useState, useEffect } from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Platform } from 'react-native';
import {useNetInfo} from "@react-native-community/netinfo";
import NetInfo from "@react-native-community/netinfo";
import CustomHeader from '../../components/header.js';
import Assets from '../../components/assets.manager.js';
import Elements from '../../components/elements.js';
import DB from '../../components/storage';
import REQUEST from '../../components/api/';

export default function Asphalt({navigation, onLoaded}) {

  const [Products, setproducts] = useState({})
  const [asphalt, setasphalt] = useState([])

  const init = async () => {
    const SESSION = await DB.session()
    await REQUEST("products", "get", {
        Authorization: SESSION.token,
      }, {}, {}, 
      async (res) => {
        if(res.status == 1 && res.data.length > 0){
          await setproducts(await res.data)
          await setasphalt(await res.data[2].products)
          await onLoaded()
        }else{
          console.log(res.message, res.data)
          onLoaded()
        }
      }, function(error){  
        console.log(error)
        onLoaded()
    })
  }

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

  const renderPoducts = () => {
    return asphalt ? asphalt.map((data, index) => {
      return (
      <Elements.product 
        onPress={() => {
          navigation.navigation.navigate("ProductDetails", {
            data: data
          });
        }} 
        key={index} 
        title={data.name + "\n" + data.description} 
        image={{uri: data.image || ''}} />)
    }) : null
  }


  // const products = Assets.test.mina.map((image, index) => {
  //   return {
  //     key: index, 
  //     image: image,
  //     title: 'DLX CD40 High Quality Mono-grade Diesel Engine Oil'
  //   }
  // })

  return (
    <SafeAreaView style={{flex: 1}}>
      <ScrollView style={{flex: 1}}>
        <View style={{flex: 1, width: '100%', flexDirection: 'row', flexWrap: 'wrap', padding: 0}}>
          {renderPoducts()}
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}