import React, { useState, useEffect } from "react";

import {
View,
Text,
TextInput,
Image,
TouchableOpacity,
FlatList,
StyleSheet,
ScrollView,
PermissionsAndroid,
} from "react-native";
import Icon from "react-native-vector-icons/MaterialIcons";
import { useNavigation } from "expo-router";
import Voice from '@react-native-voice/voice';

export default function Home1() {

const navigation = useNavigation();
const [activeTab, setActiveTab] = useState("Home");
const [searchText, setSearchText] = useState("");
const [menuItems, setMenuItems] = useState([
{ name: "Meat", image: require("../assets/images/menu1.png") },
{ name: "Cold drinks", image: require("../assets/images/drink.png") },
{ name: "Dessert", image: require("../assets/images/donut_6.png") },
{ name: "Burger", image: require("../assets/images/burger.png") },
{ name: "Bun", image: require("../assets/images/burger2.png") },
]);
const [recognizedText, setRecognizedText] = useState("");
const [isListening, setIsListening] = useState(false);

useEffect(() => {
// Set up voice event listeners
Voice.onSpeechResults = onSpeechResults;
Voice.onSpeechError = onSpeechError;

// Request microphone permission

requestMicrophonePermission();

return () => {
// Clean up listeners on component unmount
Voice.destroy().then(Voice.removeAllListeners);
};
}, []);

const requestMicrophonePermission = async () => {

try {
const granted = await PermissionsAndroid.request(
PermissionsAndroid.PERMISSIONS.RECORD_AUDIO,
{
title: 'Microphone Permission',
message: 'This app needs access to your microphone.',
buttonNeutral: 'Ask Me Later',
buttonNegative: 'Cancel',
buttonPositive: 'OK',
}
);
if (granted === PermissionsAndroid.RESULTS.GRANTED) {
console.log('Microphone permission granted');
} else {
 console.log('Microphone permission denied');
}
} catch (err) {
console.warn(err);
}
};

const onSpeechResults = (event) => {

const text = event.value[0];
setRecognizedText(text);
setSearchText(text);
setIsListening(false);
};

const onSpeechError = (event) => {

console.error("Speech recognition error: ", event);
setIsListening(false);
};

const startListening = async () => {

try {
setIsListening(true);
await Voice.start('en-US');
} catch (error) {
console.error("Error starting Voice: ", error);
setIsListening(false);
}
};

const stopListening = async () => {

try {
await Voice.stop();
setIsListening(false);
} catch (error) {
console.error("Error stopping Voice: ", error);
}
};

const filteredMenuItems = menuItems.filter(item =>

item.name.toLowerCase().includes(searchText.toLowerCase())
);

return (
<View style={styles.container}>
<ScrollView>
{/* Header */}
<View style={styles.header}>
<TouchableOpacity onPress={() => navigation.navigate('sideBar')}>
<Text>☰</Text>
</TouchableOpacity>
<Text style={styles.headerText}>Selvanayagam Road</Text>
<TouchableOpacity onPress={() => navigation.navigate('myCart')}>
<Icon name="shopping-cart" size={24} color="#000" />
</TouchableOpacity>
</View>

{/* Search Bar */}

<View style={styles.searchContainer}>
<TextInput
 placeholder="Search your food"
value={searchText}
onChangeText={setSearchText}
style={styles.searchInput}
/>
<TouchableOpacity onPress={isListening ? stopListening : startListening}>
<Icon name="mic" size={24} color={isListening ? "#ff0000" : "#000"} />
</TouchableOpacity>
</View>

{/* Filtered Menu Items Section */}

<Text style={styles.sectionTitle}>Our menu</Text>
<FlatList
horizontal
data={filteredMenuItems}
keyExtractor={(item) => item.name}
renderItem={({ item }) => (
<TouchableOpacity style={styles.menuItem}>
<Image
source={item.image}
style={styles.menuImage}
/>
<Text style={styles.menuText}>{item.name}</Text>
</TouchableOpacity>
)}
showsHorizontalScrollIndicator={false}
/>

{/* Free Delivery Banner */}

<View style={styles.deliveryBanner}>
<View style={styles.bannerContent}>
<Text style={styles.bannerText}>Free delivery within 20km!</Text>
<TouchableOpacity style={styles.orderButton}>
<Text style={styles.orderButtonText}>Order now</Text>
</TouchableOpacity>
</View>
<Image
source={require("../assets/images/delivery.png")}
style={styles.bannerImage}
/>
</View>

{/* Other Sections Here... */}

</ScrollView>

{/* Bottom Navigation Bar */}

<View style={styles.bottomBar}>
<TouchableOpacity style={styles.barItem} onPress={() =>
navigation.navigate('home1')}>
<Icon name="home" size={24} color={activeTab === "Home" ? "#000" :
"#888"} />
<Text style={{ color: activeTab === "Home" ? "#000" : "#888"
}}>Home</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.barItem} onPress={() =>
navigation.navigate('myOrder')}>
<Icon name="receipt" size={24} color={activeTab === "Order" ? "#000" :
"#888"} />
<Text style={{ color: activeTab === "Order" ? "#000" : "#888"
}}>Order</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.barItem} onPress={() =>
setActiveTab("Notif")}>
<Icon name="notifications" size={24} color={activeTab === "Notif" ?
"#000" : "#888"} />
<Text style={{ color: activeTab === "Notif" ? "#000" : "#888"
}}>Notif</Text>
</TouchableOpacity>
<TouchableOpacity style={styles.barItem} onPress={() =>
setActiveTab("Location")}>
<Icon name="location-on" size={24} color={activeTab === "Location" ?
"#000" : "#888"} />
<Text style={{ color: activeTab === "Location" ? "#000" :
"#888" }}>Location</Text>
</TouchableOpacity>
</View>
</View>
);
}

const styles = StyleSheet.create({

container: { flex: 1, backgroundColor: "#fff" },
header: {
flexDirection: "row",
justifyContent: "space-between",
padding: 16,
alignItems: "center",
},
headerText: { fontSize: 20, fontWeight: "bold" },
searchContainer: {
flexDirection: "row",
padding: 16,
alignItems: "center",
backgroundColor: "#f0f0f0",
borderRadius: 10,
marginHorizontal: 16,
},
searchInput: {
flex: 1,
height: 40,
paddingHorizontal: 8,
backgroundColor: "#fff",
borderRadius: 20,
borderColor: "#ccc",
borderWidth: 1,
},
sectionTitle: { fontSize: 18, fontWeight: "bold", marginLeft: 16 },
menuItem: { margin: 8, alignItems: "center" },
menuImage: { width: 60, height: 60 },
menuText: { marginTop: 8, fontSize: 12 },
deliveryBanner: {
flexDirection: "row",
backgroundColor: "#f9f9f9",
padding: 16,
marginVertical: 16,
borderRadius: 10,
justifyContent: "space-between",
},
 bannerContent: { flex: 1 },
bannerText: { fontSize: 16, fontWeight: "bold" },
orderButton: {
backgroundColor: "#000",
padding: 8,
width: 120,
borderRadius: 5,
alignItems: "center",
},
orderButtonText: { color: "#fff", fontWeight: "bold" },
bannerImage: { width: 80, height: 80 },
bottomBar: {
flexDirection: "row",
justifyContent: "space-around",
backgroundColor: "#f9f9f9",
paddingVertical: 12,
borderTopWidth: 1,
borderTopColor: "#ddd",
},
barItem: {
alignItems: "center",
},
});