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

export default function ANavbar() {

    const navigate = useNavigate();

    function handleLogout() {
        DataStorage.set('isLoggedIn', 'false');
        DataStorage.remove('accessToken');
        DataStorage.remove('role');
        DataStorage.remove('username');
        DataStorage.remove('cart');
        DataStorage.remove('expiryDate');
        navigate('/');
    }

    let username = DataStorage.get('username');
    let isLoggedIn = DataStorage.get('isLoggedIn');

    let userContent;
    if (isLoggedIn === 'true') {
        userContent = <>
            <Stack direction='horizontal' gap={2}>
                <Button href="/userinfo" variant='primary'>
                    Xin chào, {username}
                </Button>
                <Button href="/cart" variant='outline-primary'>
                    Giỏ hàng
                </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' style={{ minHeight: '6vh' }}>
            <Container fluid style={{ maxWidth: "90%" }}>
                <Navbar.Brand href="/">
                    <div style={{ fontWeight: 'bold' }}>
                        <span className='mr-1'>
                            <img
                                alt=""
                                src="/cats-logo.png"
                                width="30"
                                height="30"
                                className="d-inline-block align-top"
                            />
                        </span>
                        {" "}
                        CATS - Shop</div>
                </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>
    )
}