import React, { useState } from 'react';
import { View, StyleSheet, TextInput, Text, ScrollView, Image } from 'react-native';
import { Appbar, Menu, Avatar, IconButton, useTheme } from 'react-native-paper';
import Icon from 'react-native-vector-icons/MaterialIcons';
import burgerImage from "@/assets/images/burger.png";
import dpuser from "@/assets/images/userdp.png";

const Status = () => {
  const { colors, fonts } = useTheme();
  const [menuVisible, setMenuVisible] = useState(false);
  const [searchInput, setSearchInput] = useState("")

  return (
    <View style={[styles.container, { backgroundColor: colors.background }]}>
      <Appbar.Header>

        <IconButton
          icon="chevron-left" // Or use "arrow-left"
          iconColor={colors.secondary}
          size={24}
          onPress={() => navigation.goBack()} // Navigates back
        />

        <View style={styles.titleContainer}>
          <Appbar.Content title="Status" titleStyle={[fonts.titleLarge, styles.title]} />
        </View>

        <Icon
          name="search"  //used as offset
          size={40}
          color="#FFF"
        />

      </Appbar.Header>

      <View style={{ flex: 1 }}>
        <View style={{ alignItems: "center", marginBottom: 20 }}>
          <Text style={[fonts.titleLarge, { color: colors.secondary, fontWeight: "bold" }]}>Abang Bob Burger</Text>
          <Text style={[fonts.titleMedium, { color: colors.secondary, fontWeight: "bold" }]}>No ID : BobBurgerBangi</Text>
        </View>
        <Image source={burgerImage} style={styles.itemImage}></Image>

        <Text style={[fonts.titleLarge, { fontWeight: "bold", marginBottom: 20 }]}>Notification</Text>

        <View style={{ flex: 1, flexDirection: "row", gap: 10 }}>
          <Avatar.Image size={60} source={burgerImage} style={{ backgroundColor: "rgba(0,0,0,0.2)" }}></Avatar.Image>
          <View style={{width:"80%"}}>
            <View style={{ backgroundColor: "white", borderWidth: 1, borderColor: colors.secondary, borderRadius: 20, padding: 20, marginBottom:5 }}>
              <Text style={[fonts.titleMedium, { fontWeight: "bold", marginBottom: 20 }]}>
                Order Ready for Pick Up
              </Text>
              <Text style={[fonts.titleSmall, { fontWeight: "bold" }]}>
                Your order for Burger Ayam Special is now ready for pick up. Please pick up in 15 minutes as we are preparing for closing soon.
              </Text>
            </View>
            <Text style={[fonts.titleSmall, { fontWeight: "bold", marginLeft:"auto", color:"rgba(0,0,0,0.4)" }]}>
              11/2/2024 10:52PM
            </Text>
          </View>

        </View>

      </View>

    </View>
  );
};

const styles = StyleSheet.create({
  itemImage: {
    marginLeft: "auto",
    marginRight: "auto",
    marginBottom: 20
  },
  container: {
    flex: 1,
    padding: 20,
    width: '100%',
  },
  badge: {
    backgroundColor: "#BB5C3F",
    color: "#FFF",
    borderRadius: 100,
    paddingVertical: 4,
    paddingHorizontal: 6,
    fontSize: 10,
    fontWeight: "400",
    verticalAlign: "middle",
    marginStart: 5
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    fontWeight: 'bold',
  }
});

export default Status;