import * as React from 'react';
import { useState, useEffect } from 'react';
import { SafeAreaView, ScrollView, TouchableOpacity, Button, View, Text, Platform } from 'react-native';
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 Fuels({navigation, onLoaded}) {

  const [Products, setproducts] = useState({})
  const [fuels, setfuels] = 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 setfuels(await res.data[1].products)
          await onLoaded()
        }else{
          console.log(res.message, res.data)
        }
      }, function(error){  
        console.log(error)
    })
  }

  useEffect(() => {
    init()
  }, [])

  const renderPoducts = () => {
    return fuels ? fuels.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.zuvapit.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>
  );
}