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

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

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

        <Avatar.Image size={50} source={dpuser}></Avatar.Image>

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

        {/* Menu Component */}
        <Menu
          visible={menuVisible}
          onDismiss={() => setMenuVisible(false)}
          anchor={
            <Appbar.Action icon="dots-vertical" onPress={() => setMenuVisible(true)} />
          }
        >
          <Menu.Item onPress={() => console.log('Profile Clicked')} title="Profile" />
          <Menu.Item onPress={() => console.log('Settings Clicked')} title="Settings" />
          <Menu.Item onPress={() => console.log('Logout Clicked')} title="Logout" />
        </Menu>
      </Appbar.Header>

      <View style={styles.tabContainer}>
        <Text style={[styles.tabButton, fonts.titleMedium, { fontWeight: "bold" }, { borderBottomWidth: 2, borderBottomColor: colors.secondary, color: colors.secondary }]}>General  </Text>
        <Text style={[styles.tabButton, { fontWeight: "bold" }, fonts.titleMedium]}>Request <Text style={styles.badge}>1</Text></Text>
      </View>


      <View style={styles.searchSection}>
        <TextInput
          style={styles.input}
          placeholder="Search"
          onChangeText={setSearchInput}
          value={searchInput}
          underlineColorAndroid="transparent"
          placeholderTextColor="#D9D9D9"
        />
        <Icon name="search" size={20} color="#888" style={styles.icon} />
      </View>

    </View>
  );
};

const styles = StyleSheet.create({
  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
  },
  tabContainer: {
    flexDirection: "row",
    marginBottom: 20
  },
  tabButton: {
    fontWeight: "bold",
    paddingVertical: 15,
    width: "50%",
    textAlign: "center",
    active: {
      borderBottomWidth: 2,
    }
  },
  titleContainer: {
    flex: 1,
    alignItems: 'center',
  },
  title: {
    fontWeight: 'bold',
  },
  searchSection: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center'
  },
  icon: {
    padding: 10,
    position: "absolute",
    right: 10,
    color: "#D9D9D9"
  },
  input: {
    height: 40,
    flex: 1,
    borderWidth: 1,
    paddingVertical: 10,
    paddingHorizontal: 20,
    borderRadius: 100,
    borderColor: "#C0CFD0"
  }
});

export default HomeScreen;