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

const Notification = () => {
  const { colors, fonts } = useTheme();
  const [menuVisible, setMenuVisible] = useState(false);
  const [inputContent, setInputContent] = useState("");


  const preTextClick = (pretext) => {
    setInputContent(pretext)
  }

  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="Send Notification" 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={{ flex: 1, marginTop: 20 }}>
        <View style={{ flexDirection: "row", gap: 20, marginBottom: 20 }}>
          <Text style={[fonts.titleLarge, { fontWeight: "bold" }]}>To :</Text>
          <TextInput value='asd' style={{ flex: 1, paddingHorizontal: 20, borderBottomColor: "rgba(0,0,0,0.2)", borderBottomWidth: 1, marginEnd: 20 }}></TextInput>
        </View>
        <TextInput
          style={styles.textArea}
          value={inputContent}
          onChangeText={setInputContent}
          multiline={true} // Enables multi-line input
          numberOfLines={8} // Sets an initial number of visible lines
        />
        <Text style={[fonts.titleLarge, { fontWeight: "bold", marginBottom:20 }]}>Select Pretext</Text>
        <View style={{flex:1}}>
          {[
            "Request to Work From Home",
            "Request for late Check In",
            "Request for early Check Out",
            "Notify for Annual Leave",
            "Notify for Emergency Leave"
          ].map(text => <Text onPress={()=>{preTextClick(text)}} style={[fonts.titleMedium, {marginBottom:20, fontWeight:"bold", color:colors.secondary}]} >{text}</Text> )}
        </View>
      </View>

    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 20,
    width: '100%',
  },
  textArea: {
    height: 220,
    borderColor: "#ccc",
    borderWidth: 1,
    padding: 10,
    borderRadius: 8,
    textAlignVertical: "top", // Makes text start from the top-left
    backgroundColor: "#fff",
    marginBottom:20
  },
  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',
  },
  icon: {
    padding: 10,
    position: "absolute",
    right: 10,
    color: "#D9D9D9"
  }
});

export default Notification;