import React, {useState, useEffect} from 'react';
import { Text, TouchableOpacity, View } from 'react-native';
import { RFValue } from 'react-native-responsive-fontsize';
import SearchInput, { createFilter } from 'react-native-search-filter';
import { Container,Icon, SellHeader, TransactionProductCard } from 'components';
import { Colors } from 'global-styles';
import styles from './styles';
import { getCategories,getProducts } from 'services';
import { ScrollView } from 'react-native-gesture-handler';
import { FlatGrid } from 'react-native-super-grid';
const KEYS_TO_FILTERS = ['name', 'code'];

const Selling = ({ navigation,searchUpdated }) => {
  const [searchValue, setSearchValue] = useState('');
  const [products, setProducts] = useState([]);
  const [categories, setCategories] = useState([]);

  getListCategories = async () => {
    const payload = {
      page_id: 1,
      page_size: 20,
    }

    getCategories(payload).then((res) => {
      console.log("res");
      console.log(res);
      const data = [{name: 'Semua'}, ...res.data];
      setCategories(data)
    }).catch(err => {
      console.log("ERR")
      console.log(err)
    })
  }

  getListProducts = async () => {
    const payload = {
      page_id: 1,
      page_size: 1000,
    };

    getProducts(payload).then((res) => {
      setProducts(res.data);
    }).catch(err => {
      console.log(err)
    })
  }

  useEffect(() => {
    getListCategories();
    getListProducts();
  }, []);

  // const filteredData = products.filter(createFilter(searchValue, KEYS_TO_FILTERS));

  return (
    <Container backgroundColor={Colors.WHITE} barColor={Colors.SECONDARY} barStyle='light-content'>
        <SellHeader 
          setSearch={(search) => setSearchValue(search)}
          searchValue={searchValue}
          navigation={navigation}
          categories={categories}
        />
        <FlatGrid
          data={products}
          contentContainerStyle={{marginTop: RFValue(5)}}
          spacing={2}
          renderItem={({ item, index }) => (
            <TransactionProductCard 
              data={item}
            />
          )}
        />
    </Container>
  );
}

export default Selling