import * as React from 'react';
import Toolbar from '@mui/material/Toolbar';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import MuiAppBar, { AppBarProps as MuiAppBarProps } from '@mui/material/AppBar';
import { styled } from '@mui/material/styles';
import HelpOutlineOutlinedIcon from '@mui/icons-material/HelpOutlineOutlined';

import KOSMenuButton from './KOSMenuButton';
import KOSClientClock from './KOSClientClock';
import KOSAccountMenu from './KOSAccountMenu';
import IconButton from '@mui/material/IconButton';
import Tooltip from '@mui/material/Tooltip';

interface AppBarProps extends MuiAppBarProps {
  open?: boolean;
}

const DRAWER_WIDTH = 240;

const AppBar = styled(MuiAppBar, {
  shouldForwardProp: (prop) => prop !== 'open',
})<AppBarProps>(({ theme, open }) => ({
  zIndex: theme.zIndex.drawer + 1,
  transition: theme.transitions.create(['width', 'margin'], {
    easing: theme.transitions.easing.sharp,
    duration: theme.transitions.duration.leavingScreen,
  }),
  ...(open && {
    marginLeft: DRAWER_WIDTH,
    width: `calc(100% - ${DRAWER_WIDTH}px)`,
    transition: theme.transitions.create(['width', 'margin'], {
      easing: theme.transitions.easing.sharp,
      duration: theme.transitions.duration.enteringScreen,
    }),
  }),
}));

export interface KOSTopbarProps {
  title: string;
  isDevelopment?: boolean;
  openMenu?: boolean;
  searchComponent?: React.ReactNode;
  helpCenterLink?: string;
  flexRightArea?: number;
  signOutText?: string;
  username?: string;
  avatarUrl?: string;
  onOpenMenuClick?: () => void;
  onLogoutClick?: () => void;
}

const KOSTopbar = (props: KOSTopbarProps) => {
  const {
    isDevelopment,
    openMenu,
    title,
    searchComponent,
    flexRightArea,
    helpCenterLink,
    onOpenMenuClick,
    onLogoutClick,
    signOutText,
    username,
    avatarUrl,
  } = props;

  const handleOpenMenuClick = () => {
    if (onOpenMenuClick) {
      onOpenMenuClick();
    }
  };

  return (
    <AppBar
      position="fixed"
      color={isDevelopment ? 'secondary' : 'primary'}
      sx={{ zIndex: 15 }}
    >
      <Toolbar>
        {/* Left area */}
        <Box sx={{ display: 'flex', alignItems: 'center', flex: 1 }}>
          {openMenu !== undefined && (
            <KOSMenuButton open={openMenu} onClick={handleOpenMenuClick} />
          )}

          <a href="/">
            <Box display="flex" gap={0.5} alignItems="center">
              <img
                src="https://images-kos.s3.amazonaws.com/logo_Foodology/logo_foodology_blanco.png"
                alt="Foodology logo"
                height={26}
              />
            </Box>
          </a>
        </Box>

        {/* Center area */}
        <Box
          display="flex"
          gap={1}
          alignItems="center"
          justifyContent="center"
          sx={{ textTransform: 'uppercase', flex: 1 }}
        >
          {isDevelopment && (
            <Typography variant="h6" sx={{ color: 'white' }}>
              🧬
            </Typography>
          )}
          <Typography variant="h6" sx={{ color: 'white' }}>
            {title}
          </Typography>
        </Box>

        {/* Right area */}
        <Box
          sx={{
            flex: flexRightArea ?? 1,
            display: 'flex',
            justifyContent: 'end',
            alignItems: 'center',
            gap: 2,
          }}
        >
          {searchComponent !== undefined && <Box>{searchComponent}</Box>}
          <Box
            sx={{
              display: 'table',
              textAlign: 'center',
            }}
          >
            <KOSClientClock />
          </Box>
          {helpCenterLink !== undefined && (
            <Box
              sx={{
                display: 'table',
                textAlign: 'center',
              }}
            >
              <Tooltip title="Help Center">
                <IconButton
                  href={helpCenterLink}
                  size="small"
                  sx={{ ml: 2, marginLeft: '0' }}
                  target="_blank"
                >
                  <HelpOutlineOutlinedIcon
                    sx={{ color: 'white', width: 32, height: 32 }}
                  />
                </IconButton>
              </Tooltip>
            </Box>
          )}

          <Box>
            <KOSAccountMenu
              onLogoutClick={onLogoutClick}
              signOutText={signOutText}
              userName={username}
              avatarUrl={avatarUrl}
            />
          </Box>
        </Box>
      </Toolbar>
    </AppBar>
  );
};

export default KOSTopbar;