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

interface BNProps {
    isProfileActive: boolean;
    isMenuActive: boolean;
}

const BottomNav: React.FC<BNProps> = ({ isProfileActive, isMenuActive })  => {
    const theme = useTheme();
    const [menuVisible, setMenuVisible] = useState(false);

    return (
        <View style={ (isProfileActive || isMenuActive )&& { display: 'none' }}>
            <View style={{ backgroundColor: theme.colors.background }}>
                <Appbar.Header style={[styles.bottomBar, { backgroundColor: theme.colors.primaryContainer }]} >
                    <View style={{ alignItems: "center", flexDirection: "row", justifyContent: "space-between", padding: 10, flex: 1, paddingHorizontal: 15 }}>
                        <Text style={{ color: theme.colors.primary, fontFamily: "SpaceReg" }}>Daisy Knight Dog Park</Text>
                        <Button
                            mode="text"
                            onPress={() => setMenuVisible(true) }
                            style={{ backgroundColor: theme.colors.primary, height: styles.bottomBar.height/2, justifyContent: "center"}}
                            labelStyle={{ color: theme.colors.onPrimary, fontFamily: "SpaceReg"}}>
                            Change
                        </Button>
                    </View>
                </Appbar.Header>
                <Portal>
                    <Dialog visible={menuVisible} onDismiss={() => setMenuVisible(false)} style={{ backgroundColor: theme.colors.primaryContainer, maxHeight: 400 }}>
                        <Dialog.Title style={{ color: theme.colors.primary, textAlign: 'center' }}>Location</Dialog.Title>
                        <Broken />
                        <Dialog.Actions style={{ justifyContent: "center" }}>
                            <Button onPress={() => setMenuVisible(false)} mode="contained" style={{ backgroundColor: theme.colors.inversePrimary }} labelStyle={{ color: theme.colors.primary }}>
                                Close
                            </Button>
                        </Dialog.Actions>
                    </Dialog>
                </Portal>
            </View>
        </View>
    )
}

export default BottomNav;