FinalProject/src/components/Header.jsx

import {AppBar, Box, Toolbar, IconButton, Typography, Menu, Container, Avatar, Button, Tooltip, MenuItem, Badge} from '@mui/material';
import MenuIcon from '@mui/icons-material/Menu';
import SearchIcon from '@mui/icons-material/Search';
import FavoriteBorderIcon from '@mui/icons-material/FavoriteBorder';
import ShoppingCartIcon from '@mui/icons-material/ShoppingCart';
import ManageSearchIcon from '@mui/icons-material/ManageSearch';
import Link from "react-router-dom/es/Link";
import {useState} from "react";
import '../scss/Header.scss';
import {actionAuthLogout} from "../reducers/AuthReducer";
import {connect} from "react-redux";
import {actionUserRemove} from "../reducers/UserReducer";
import {backURL} from "../actions/PathDB";
import userDefault from "../img/header/userDefault.png"

const pages = ['catalog', 'about us', 'our team', 'faq', 'contact']
const settingsDefaultUserAuth = ['Profile', 'Dashboard', 'Logout']

const Header = ({user={}}) => {
    const [anchorElNav, setAnchorElNav] = useState(null);
    const [anchorElUser, setAnchorElUser] = useState(null);

    const handleOpenNavMenu = (event) => {
        setAnchorElNav(event.currentTarget);
    };
    const handleOpenUserMenu = (event) => {
        setAnchorElUser(event.currentTarget);
    };

    const handleCloseNavMenu = () => {
        setAnchorElNav(null);
    };
    const handleCloseUserMenu = () => {
        setAnchorElUser(null);
    };

    const LogoItem = () => {
        return (
            <Link to='/' className="Header__Logo"> ABRAXAS </Link>
        )
    }
    const LinkItem = ({page, color='white'}) => {
        return (
            <Button
                key={page.toString()}
                onClick={handleCloseNavMenu}
                sx={{ my: 2, color: color, display: 'block'}}
            >
                <Link
                    to={`/${Array.from(page.toLowerCase()).map(i => i === ' ' ? '-' : i).join('')}`}
                    className="Header__Link"> {page}
                </Link>
            </Button>
        )
    }
    const IconItems = ({cart={}, wishlist={}, size="large", color='default', valueWishList=0}) => {
        return (
            <>
                <Link to='/search'>
                    <IconButton key={'search'} size={size} aria-label="search" color={color}>
                        <SearchIcon />
                    </IconButton>
                </Link>
                <Link to='/my-orders'>
                    <IconButton key={'my-orders'} size={size} aria-label="my-orders" color={color}>
                        <ManageSearchIcon />
                    </IconButton>
                </Link>
                <Link to='/wish-list'>
                    <IconButton key={'wish-list'} size={size} aria-label="wish-list" color={color}>
                        <Badge
                            color="success"
                            badgeContent={+Object.entries(wishlist).length}
                            anchorOrigin={{
                                vertical: 'bottom',
                                horizontal: 'right',
                            }}
                        >
                            <FavoriteBorderIcon />
                        </Badge>
                    </IconButton>
                </Link>
                <Link to='/basket'>
                    <IconButton key={'basket'} size={size} aria-label="basket" color={color}>
                        <Badge
                                color="success"
                                badgeContent={+Object.entries(cart).reduce((a, b) => {
                                    return a + b[1].count
                                }, 0)}
                                anchorOrigin={{
                                    vertical: 'bottom',
                                    horizontal: 'right',
                                }}
                        >
                            <ShoppingCartIcon/>
                        </Badge>
                    </IconButton>
                </Link>
            </>
        )
    }
    const CIconItems = connect(state => ({cart: state.cart, wishlist: state.wishlist}))(IconItems)

    const ItemAuth = ({link, text}) => {
        return (
            <Link style={{textDecoration: 'none', color: '#000'}} to={`/${link}`}>
                <MenuItem key={text} onClick={handleCloseNavMenu}>
                    <Typography textAlign="center" color='#fff'>{text}</Typography>
                </MenuItem>
            </Link>
        )
    }

    const UserIcon = ({auth}) => {
        return (
                Object.entries(auth).length === 0 ?
                    <Link style={{textDecoration: 'none'}} to={'/my-account'}>
                        <IconButton sx={{ p: 0 }}>
                            <Avatar alt="User default" src={userDefault} />
                        </IconButton>
                    </Link> :
                    <>
                        <Tooltip title="Open settings">
                            <IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>
                                {!auth.avatar && auth.avatar === null ?
                                    <Avatar alt="User" src={userDefault}/> :
                                    <Avatar alt="User" src={user?.avatar?.url && backURL + '/' + user?.avatar?.url}/>
                                }
                            </IconButton>
                        </Tooltip>
                        <Menu
                            sx={{ mt: '55px', ml: '90%'}}
                            id="menu-appbar"
                            anchorEl={anchorElUser}
                            anchorOrigin={{
                                vertical: 'top',
                                horizontal: 'right',
                            }}
                            keepMounted
                            transformOrigin={{
                                vertical: 'top',
                                horizontal: 'right',
                            }}
                            open={Boolean(anchorElUser)}
                            onClose={handleCloseUserMenu}
                        >
                            {settingsDefaultUserAuth.map(item => {
                                if (item === 'Logout') {
                                    return <CButtonLogOut key={'Logout'}/>
                                }
                                else if(item === 'Dashboard'){
                                    if (auth.payload?.sub?.acl[2]){
                                        return <ItemAuth link={'admin'} text={'Dashboard'} key={'admin'}/>
                                    }
                                }
                                else if(item !== 'Dashboard') {
                                    return <ItemAuth key={item.toString()} text={item}
                                                     link={Array.from(item.toLowerCase()).map(i => i === ' ' ? '-' : i).join('')}/>
                                }
                            })}
                        </Menu>
                    </>
        )
    }
    const CUserIcon = connect(state => ({auth: state.auth}))(UserIcon)

    const ButtonLogOut = ({actionLogOut, actionUserRemove}) => {
        return (
            <Button
                onClick={() => {actionLogOut(); actionUserRemove(); handleCloseNavMenu();}}
                style={{textDecoration: 'none', textTransform: 'capitalize', fontWeight: '400', color: '#fff', textAlign: "center", width: '100%'}}
            >
                Log out
            </Button>
        )
    }
    const CButtonLogOut = connect(null, {actionLogOut: actionAuthLogout, actionUserRemove: actionUserRemove})(ButtonLogOut)

    return (
        <AppBar sx={{padding: '10px 0', backgroundColor: 'rgb(131,179,175)'}} className='Header' position="fixed" enableColorOnDark={true}>
            <Container maxWidth="xl">
                <Toolbar disableGutters>
                    <Typography
                        variant="h6"
                        noWrap
                        component="div"
                        sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}
                    >
                        <LogoItem/>
                    </Typography>

                    <Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>
                        <IconButton
                            size="large"
                            aria-label="account of current user"
                            aria-controls="menu-appbar"
                            aria-haspopup="true"
                            onClick={handleOpenNavMenu}
                            color="inherit"
                        >
                            <MenuIcon />
                        </IconButton>
                        <Menu className='Header__Burger'
                            id="menu-appbar"
                            anchorEl={anchorElNav}
                            anchorOrigin={{
                                vertical: 'bottom',
                                horizontal: 'left',
                            }}
                            keepMounted
                            transformOrigin={{
                                vertical: 'top',
                                horizontal: 'left',
                            }}
                            open={Boolean(anchorElNav)}
                            onClose={handleCloseNavMenu}
                            sx={{
                                display: { xs: 'block', md: 'none' },
                            }}
                        >
                            {pages.map((page) => (
                                <MenuItem key={page.toString()} onClick={handleCloseNavMenu}>
                                    <LinkItem key={page.toString()} page={page} color={'#fff'}/>
                                </MenuItem>
                            ))}
                            <MenuItem onClick={handleCloseNavMenu}>
                                <CIconItems size={'large'} color={'inherit'} />
                            </MenuItem>
                        </Menu>
                    </Box>

                    <Typography
                        variant="h6"
                        noWrap
                        component="div"
                        sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}
                    >
                        <LogoItem />
                    </Typography>

                    <Box className='Header__Links' sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>
                        {pages.map((page) => (
                            <LinkItem key={page.toString()} page={page} color={'#fff'}/>
                        ))}
                    </Box>

                    <Box className='Header__Icons' sx={{ flexGrow: 0, display: { xs: 'none', md: 'flex' } }}>
                        <CIconItems size={'large'} />
                    </Box>
                    <Box sx={{ flexGrow: 0 }}>
                        <CUserIcon/>
                    </Box>
                </Toolbar>
            </Container>
        </AppBar>
    );
};
const CHeader = connect(state => ({user: state.user}))(Header)
export default CHeader;