import React, { useEffect, useState } from 'react';
import { View, Text, TouchableOpacity, ScrollView } from 'react-native';
import axios from 'axios';

const HomeScreen = () => {
  const [categories, setCategories] = useState([]);
  const [products, setProducts] = useState([]);
  const [groupedProducts, setGroupedProducts] = useState({});

  useEffect(() => {
    // Kategorileri çek
    axios.get('https://bego-api.testmagna.com/api/categories')
      .then(response => {
        setCategories(response.data);
      })
      .catch(error => {
        console.error('Error fetching categories: ', error);
      });

    // Ürünleri çek
    axios.get('https://bego-api.testmagna.com/api/products')
      .then(response => {
        setProducts(response.data);
      })
      .catch(error => {
        console.error('Error fetching products: ', error);
      });
  }, []);

  // Ürünleri kategorilerine göre grupla
  useEffect(() => {
    const grouped = {};

    products.forEach(product => {
      const categoryId = product.category_id;
      if (!grouped[categoryId]) {
        grouped[categoryId] = [];
      }
      grouped[categoryId].push(product);
    });

    setGroupedProducts(grouped);
  }, [products]);

  const renderCategoryItem = (category) => (
    <TouchableOpacity key={category.id} onPress={() => handleCategoryPress(category)}>
      <Text style={{ fontSize: 18, fontWeight: 'bold', marginVertical: 10 }}>{category.title}</Text>
    </TouchableOpacity>
  );

  const renderProductItem = (product) => (
    <View key={product.id}>
      <Text>Ürün Adı: {product.urun_adi}</Text>
      <Text>Ürün Kodu: {product.urun_kodu}</Text>
    </View>
  );

  return (
    <ScrollView>
      <View style={{ padding: 10 }}>
        {/* Kategori listesi */}
        {categories.map(category => renderCategoryItem(category))}
      </View>

      <View style={{ padding: 10 }}>
        {/* Kategorilere göre ürün listesi */}
        {Object.keys(groupedProducts).map(categoryId => (
          <View key={categoryId}>
            <Text style={{ fontSize: 18, fontWeight: 'bold', marginVertical: 10 }}>Kategori: {categoryId}</Text>
            {groupedProducts[categoryId].map(product => renderProductItem(product))}
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

export default HomeScreen;