import { ShoppingBasket, Person } from "@mui/icons-material"
import { AppBar, IconButton, Toolbar, Link, Box, Badge, Button } from "@mui/material"
import PublicHeaderSearch from "./PublicHeaderSearch"
import { Link as RouterLink} from "react-router-dom"
import { useSelector, useDispatch } from "react-redux"
import {CartAdd} from "../store/cartSlice"



const PublicHeader = ({handleCart, orderLenght}) => {
    
    const cartLenght = Object.keys(useSelector(state => state.cart)).length
    const dispatch = useDispatch()
    const myState = useSelector(state => state)

    return (

        <AppBar position="static" sx={{mb:2}}>
            <Toolbar>
                <Box sx={{ flexGrow: 1}}>
                    <Link to="/" underline="none" variant="h5" sx={{ color: "white" }} component={RouterLink} >
                        My Shop
                    </Link>
                </Box>

                <PublicHeaderSearch />
                <RouterLink to="/profile" color="white">
                <IconButton sx={{color: "white"}}>
                    <Person />
                </IconButton>
                </RouterLink>
                <IconButton
                    color="inherit"
                    onClick={handleCart}>
                    <Badge
                    color="secondary"
                    badgeContent={cartLenght}>
                    <ShoppingBasket />
                    </Badge>
                </IconButton>
                
            </Toolbar>
        </AppBar>

    )
}

export default PublicHeader