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' >
            <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>
    )
}