import React from 'react';
import {useState,useEffect} from 'react';
import {View,TextInput,StyleSheet,FlatList} from "react-native";
import ProductItems from "../../ProductItems/ProductItem";

import fetch_json from '../../../fetch_json';

export default function HomeScreen() {

const [jsonProductos, setProductos] = useState([]);
const urlProductos = 'http://136.145.231.41/raices_api/api/inventario/read.php';

/*
const [query, setQuery] = useState('');

const filter = (query: string) => {
  return jsonProductos.filter((item) =>
    item.producto.toLocaleLowerCase().includes(query.toLocaleLowerCase())
  );
};

async function fetch_() {
  try {
      const response = await fetch(urlProductos);
      const json = await response.json();
      if (query.length === 0) {
        console.log('empty');
        setProductos(json);
      }
      else {
        console.log(query);
        setProductos(json.filter((item) => item.producto.includes(query)));
      }
  } catch (error) {
      console.error(error);
  };
}
*/

useEffect(() => {
    fetch_json(urlProductos, setProductos);
    //fetch_();
});

const [jsonInsignias, setInsignias] = useState([]);
const url = 'http://136.145.231.41/raices_api/api/nosotros/read.php?id=1';

useEffect(() => {
    fetch_json(url, setInsignias);
});

  return (
    <View style={styles.page}>
      {/*
      <TextInput
        placeholder="Hacer búsqueda..."
        onChangeText={(query) => {setQuery(query)}}
      />
      */}

      <FlatList
        data={jsonProductos}
        renderItem={({item}) => <ProductItems item={item} />}
        keyExtractor={(item, index) => item.id_producto}
      />
    </View>
  );
};
const styles = StyleSheet.create({
  page: {
    padding: 10,
  },
});