import { useState } from 'react';
import fendiLogo from '/favicon.png'
import { AppBar, Toolbar, Typography, InputBase, IconButton, Box } from '@mui/material';
import SearchIcon from '@mui/icons-material/Search';
import MenuDrawer from './MenuDrawer';

export default function AppHeader({ zone = 'public', onSelectMenuItem }) {

  const bgColor = {
    public: '#40120EFF',
    restricted: '#40120EFF',
    private: '#40120EFF',
  };

  const [menuOpen, setMenuOpen] = useState(false);

  const isPrivate = zone === 'private';
  const isRestricted = zone === 'restricted';
  const isPublic = zone === 'public';

  return (
    <AppBar position="static"
      sx={{
        textAlign: 'center',
        backgroundColor: bgColor[zone],
        mt: 'auto',
        fontSize: { xs: '0.75rem', md: '1rem' },
      }} >
      <Toolbar sx={{ justifyContent: 'space-between', flexWrap: 'wrap' }}>
        <Box display="flex" alignItems="center">
          <IconButton edge="start" color="inherit" onClick={() => setMenuOpen(true)}>
            <img src={fendiLogo} alt="Fendi logo" style={{ height: 40 }} />
          </IconButton>
        </Box>

        {/* Search only visible for restricted or private zones */}
        {(isRestricted || isPrivate || isPublic) && (
          <Box sx={{ position: 'relative', display: { xs: 'none', md: 'flex' } }}>
            <SearchIcon sx={{ position: 'absolute', left: 10, top: '50%', transform: 'translateY(-50%)', color: '#A68A72FF' }} />
            <InputBase
              placeholder="Search…"
              sx={{
                pl: 4,
                pr: 2,
                py: 0.5,
                borderRadius: 1,
                color: '#A68A72FF',
                width: { md: '300px', lg: '400px' }
              }}
            />
          </Box>
        )}

        {/* Login button only visible for public zone */}
        {isPublic && (
          <Box>
            <IconButton color="inherit">
              <Typography variant="button" color="#A68A72FF">
                Login
              </Typography>
            </IconButton>
          </Box>
        )}

        {/* Rendering the Drawer */}
        <MenuDrawer
          zone="private"
          open={menuOpen}
          onClose={() => setMenuOpen(false)}
          onSelect={onSelectMenuItem} // pass handler from App
        />

      </Toolbar>
    </AppBar>
  );
}