import {Appbar, Portal, Button, Dialog, Menu, useTheme} from "react-native-paper";
import {Image, useColorScheme, View} from "react-native";
import React, {useState} from "react";
import styles from "@/assets/styles";
import About from "@/components/About";

const TopNav = ({ toggleProfile }: { toggleProfile: () => void; }) => {
    const theme = useTheme();
    const colorScheme = useColorScheme();
    const [aboutVisible, setAboutVisible] = useState(false);
    const [menuVisible, setMenuVisible] = useState(false);
    const [menuAnchor, setMenuAnchor] = useState<{ x: number; y: number } | null>(null);

    return (
        <View style={{ backgroundColor: theme.colors.background }}>
            <Appbar.Header style={[styles.topBar, { backgroundColor: theme.colors.primaryContainer }]}>
                <View>
                    <Menu visible={menuVisible} onDismiss={() => setMenuVisible(false)} anchor={menuAnchor} style={{ backgroundColor: theme.colors.primaryContainer }}>
                        <Menu.Item onPress={() => { setMenuVisible(false); setAboutVisible(true);}} title="About Us" style={{ backgroundColor: theme.colors.primaryContainer }}/>
                    </Menu>
                    <Appbar.Action icon="menu"
                        onPressIn={(event) => {
                            setMenuAnchor({ x: event.nativeEvent.pageX, y: event.nativeEvent.pageY + 40 });
                            setMenuVisible(true);
                        }}
                        iconColor={theme.colors.primary} />
                </View>
                <View style={styles.logoContainer} >
                    <Image source={
                        colorScheme === 'dark' ?
                            require("../assets/images/pogdark_logo_inverse.png") : require("../assets/images/pogdark_logo.png")
                    } style={styles.logo} resizeMode={"contain"} />
                </View>
                <Appbar.Action icon="pencil" onPress={toggleProfile} iconColor={ theme.colors.primary } />
            </Appbar.Header>
            <Portal>
                <Dialog visible={aboutVisible} onDismiss={() => setAboutVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer }}>
                    <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>About Us</Dialog.Title>
                    <About />
                    <Dialog.Actions style={{ justifyContent: "center" }}>
                        <Button onPress={() => setAboutVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
                            Close
                        </Button>
                    </Dialog.Actions>
                </Dialog>
            </Portal>
        </View>
    );
};

export default TopNav;