import React, { useEffect, useState } from 'react';
import { View, Text, Image, ScrollView, TextInput, TouchableOpacity, StyleSheet } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import axios from 'axios';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';

const Tab = createBottomTabNavigator();

const MenuScreen = () => {
  const [categories, setCategories] = useState([]);
  const [popularItems, setPopularItems] = useState([]);

  useEffect(() => {
    fetchData();
  }, []);

  const fetchData = async () => {
    try {
      const response = await axios.get('https://foodbyte.pythonanywhere.com/home/');
      setCategories(response.data.categories);
      setPopularItems(response.data.popularitems);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

const addToCart = async (itemName) => {
  try {
    // Create the headers object with the authorization token
    const headers = {
      Authorization: Bearer ${await AsyncStorage.getItem('access_token')}, // Replace with your actual token retrieval logic
    };

    // Send the POST request to add the item to the cart
    await axios.post(https://foodbyte.pythonanywhere.com/Cartaccess/${itemName}, {}, { headers });

    // Notify user of success
    alert('Item added to cart!');
  } catch (error) {
    // Handle any errors
    console.error('Error adding to cart:', error);
    alert('Failed to add item to cart.');
  }
};


  return (
    <ScrollView style={styles.container}>
      {/* Header Section */}
      <View style={styles.header}>
        <Text style={styles.menuTitle}>Menu</Text>
        <Icon name="person-circle-outline" size={30} color="#fff" />
      </View>

      {/* Search Bar */}
      <View style={styles.searchSection}>
        <Icon name="search-outline" size={20} color="#000" />
        <TextInput placeholder="search" style={styles.searchInput} />
      </View>

      {/* Categories */}
      <ScrollView horizontal showsHorizontalScrollIndicator={false} style={styles.categories}>
        {categories.map((category, index) => (
          <View key={index} style={styles.category}>
            <Image source={{ uri: https://foodbyte.pythonanywhere.com${category.category_img} }} style={styles.categoryImage} />
            <Text style={styles.categoryText}>{category.category_name}</Text>
          </View>
        ))}
      </ScrollView>

      {/* Specials Section */}
      <View style={styles.specials}>
        <Text style={styles.specialsText}>Specials</Text>
        <Text style={styles.offerText}>Flat 50% OFF Combo Pack of the day</Text>
      </View>

      {/* Popular Items */}
      <Text style={styles.popularTitle}>Popular</Text>
      <View style={styles.popularItems}>
        {popularItems.map((item, index) => (
          <View key={index} style={styles.popularCard}>
            <Image source={{ uri: https://foodbyte.pythonanywhere.com${item.item_img} }} style={styles.popularImage} />
            <Text style={styles.itemName}>{item.item_name}</Text>
            <Text style={styles.itemPrice}>₹{item.item_price}</Text>
            <TouchableOpacity style={styles.addButton} onPress={() => addToCart(item.item_name)}>
              <Icon name="cart-outline" size={20} color="#00c853" />
            </TouchableOpacity>
          </View>
        ))}
      </View>
    </ScrollView>
  );
};

const ProfileScreen = () => (
  <View style={styles.centered}>
    <Text>Profile Screen</Text>
  </View>
);

const CartScreen = () => (
  <View style={styles.centered}>
    <Text>Cart Screen</Text>
  </View>
);

const OrdersScreen = () => (
  <View style={styles.centered}>
    <Text>Orders Screen</Text>
  </View>
);

const App = () => {
  return (
    <NavigationContainer>
      <Tab.Navigator
        screenOptions={({ route }) => ({
          tabBarIcon: ({ color, size }) => {
            let iconName;

            if (route.name === 'Home') {
              iconName = 'home-outline';
            } else if (route.name === 'Profile') {
              iconName = 'person-outline';
            } else if (route.name === 'Cart') {
              iconName = 'cart-outline';
            } else if (route.name === 'Orders') {
              iconName = 'receipt-outline';
            }

            return <Icon name={iconName} size={size} color={color} />;
          },
          tabBarActiveTintColor: '#ff0066',
          tabBarInactiveTintColor: 'gray',
        })}
      >
        <Tab.Screen name="Home" component={MenuScreen} />
        <Tab.Screen name="Profile" component={ProfileScreen} />
        <Tab.Screen name="Cart" component={CartScreen} />
        <Tab.Screen name="Orders" component={OrdersScreen} />
      </Tab.Navigator>
    </NavigationContainer>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#ff0066',
  },
  header: {
    flexDirection: 'row',
    justifyContent: 'space-between',
    padding: 20,
  },
  menuTitle: {
    color: '#fff',
    fontSize: 24,
    fontWeight: 'bold',
  },
  searchSection: {
    flexDirection: 'row',
    backgroundColor: '#fff',
    marginHorizontal: 20,
    paddingHorizontal: 10,
    paddingVertical: 8,
    borderRadius: 20,
    alignItems: 'center',
    marginVertical: 10,
  },
  searchInput: {
    marginLeft: 10,
    fontSize: 16,
    color: '#000',
    flex: 1,
  },
  categories: {
    flexDirection: 'row',
    marginVertical: 10,
    paddingHorizontal: 20,
  },
  category: {
    alignItems: 'center',
    marginHorizontal: 10,
  },
  categoryImage: {
    width: 60,
    height: 60,
    borderRadius: 30,
  },
  categoryText: {
    marginTop: 5,
    color: '#fff',
  },
  specials: {
    backgroundColor: '#440099',
    padding: 20,
    marginVertical: 10,
    marginHorizontal: 20,
    borderRadius: 10,
  },
  specialsText: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold',
  },
  offerText: {
    color: '#fff',
    fontSize: 16,
    marginTop: 5,
  },
  popularTitle: {
    color: '#fff',
    fontSize: 24,
    fontWeight: 'bold',
    marginHorizontal: 20,
    marginVertical: 10,
  },
  popularItems: {
    flexDirection: 'row',
    flexWrap: 'wrap',
    justifyContent: 'space-between',
    paddingHorizontal: 20,
  },
  popularCard: {
    backgroundColor: '#fff',
    borderRadius: 10,
    width: '48%',
    marginVertical: 10,
    padding: 10,
    alignItems: 'center',
  },
  popularImage: {
    width: 100,
    height: 100,
    borderRadius: 10,
  },
  itemName: {
    marginTop: 10,
    fontSize: 16,
    color: '#000',
  },
  itemPrice: {
    color: '#00c853',
    fontSize: 16,
    fontWeight: 'bold',
    marginVertical: 5,
  },
  addButton: {
    marginTop: 10,
  },
  centered: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
});

export default App;    rewrite this code for expo fix all the errors if present