import Container from 'react-bootstrap/Container';
import Nav from 'react-bootstrap/Nav';
import Navbar from 'react-bootstrap/Navbar';
import Button from 'react-bootstrap/Button';
import { Stack } from 'react-bootstrap';
import { useNavigate } from 'react-router-dom';

export default function ANavbar() {

    const navigate = useNavigate();
    
    function handleLogout() {
        sessionStorage.setItem('isLoggedIn','false');
        sessionStorage.removeItem('username');
        sessionStorage.removeItem('cart');
        navigate('/');
    }

    let username = sessionStorage.getItem('username');
    let isLoggedIn = sessionStorage.getItem('isLoggedIn');

    let userContent;
    if (isLoggedIn === 'true') {
        userContent = <>
            <Stack direction='horizontal' gap={2}>
                <Button href="/userinfo" variant='primary'>
                    Xin chào, {username}
                </Button>
                {' '}
                <Button onClick={handleLogout} variant='outline-primary'>
                    Đăng xuất
                </Button>
            </Stack>
        </>
    } else {
        userContent = <>
            <Stack direction='horizontal' gap={2}>
                <Button href="/login" variant='primary'>
                    Đăng nhập
                </Button>
                {' '}
                <Button href="/register" variant='outline-primary'>
                    Đăng ký
                </Button>
            </Stack>
        </>
    }

    return (
        <Navbar id="home" expand="lg" className="bg-body-tertiary" sticky='top' >
            <Container>
                <Navbar.Brand href="/">
                    <img
                        alt=""
                        src="/cats-logo.png"
                        width="30"
                        height="30"
                        className="d-inline-block align-top"
                    />{' '}
                    CATS-Shop
                </Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="me-auto">
                        {/* These are the navigators */}
                        <Nav.Link href="/#home">Trang chủ</Nav.Link>
                        <Nav.Link href="/#about-us">Về chúng tôi</Nav.Link>
                        <Nav.Link href="/#news">Tin tức</Nav.Link>
                        <Nav.Link href="/#store">Chi nhánh</Nav.Link>
                        <Nav.Link href="/#menu">Menu</Nav.Link>
                        <Nav.Link href="/#contact">Liên hệ</Nav.Link>
                    </Nav>
                    {userContent}
                </Navbar.Collapse>
            </Container>
        </Navbar>
    )
}