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 [selectedCategory, setSelectedCategory] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchCategories = async () => {
      try {
        setLoading(true);
        const response = await axios.get('https://bego-api.testmagna.com/api/categories');
        setCategories(response.data);
        setLoading(false);
      } catch (error) {
        setError('Error fetching categories');
        setLoading(false);
      }
    };

    fetchCategories();
  }, []);

  const handleCategoryPress = async (category) => {
    try {
      setLoading(true);
      const response = await axios.get(`https://bego-api.testmagna.com/api/categories/${category.id}/products`);
      setSelectedCategory({ ...category, products: response.data });
      setLoading(false);
    } catch (error) {
      setError('Error fetching products for the selected category');
      setLoading(false);
    }
  };

  const handleGoBack = () => {
    setError(null);
    setSelectedCategory(null);
  };

  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 }}>
        {loading ? (
          <Text>Loading...</Text>
        ) : error ? (
          <View>
            <Text>{error}</Text>
            <TouchableOpacity onPress={handleGoBack}>
              <Text style={{ color: 'blue', marginTop: 10 }}>Geri</Text>
            </TouchableOpacity>
          </View>
        ) : (
          categories.map(category => renderCategoryItem(category))
        )}
      </View>

      {selectedCategory && (
        <View style={{ padding: 10 }}>
          <Text style={{ fontSize: 18, fontWeight: 'bold', marginVertical: 10 }}>Seçilen Kategori: {selectedCategory.title}</Text>
          {selectedCategory.products.map(product => renderProductItem(product))}
          <TouchableOpacity onPress={handleGoBack}>
            <Text style={{ color: 'blue', marginTop: 10 }}>Geri</Text>
          </TouchableOpacity>
        </View>
      )}
    </ScrollView>
  );
};

export default HomeScreen;