import { Menu as MenuIcon } from '@mui/icons-material';
import { AppBar, type AppBarProps, Toolbar, Box, Typography, Button } from '@mui/material';
import { Link } from 'react-router-dom';

import Logo from '../../Logo';
import { styled } from '../../Theme';

const StyledAppBar = styled(AppBar)`
  && {
    z-index: ${(props) => props.theme.zIndex.drawer};
    background: ${(props) => props.theme.palette.background.default};
    box-shadow: none;
    top: 0;
    height: auto;
  }
  .header-toolbar {
    background: ${(props) => props.theme.palette.background.default};
    color: ${(props) => props.theme.palette.text.primary};
    margin: ${(props) => props.theme.spacing(1)}px 0;
  }
  .header-link {
    display: flex;
    text-decoration: none;
    flex-shrink: 1;
    overflow: hidden;
  }
  .header-logo {
    margin-right: 20px;
  }
  .header-title {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
  }
  .header-title__primary {
    font-size: 24px;
    font-weight: 800;
    color: ${(props) => {
      return props.theme.typography.color.main;
    }};
    text-transform: uppercase;
    display: flex;
    align-items: center;
  }
  .header-title__secondary {
    font-size: 14px;
    line-height: 1.71;
    color: ${(props) => {
      return props.theme.typography.color.gray;
    }};
  }

  .header-addons {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 9999999;

    .user-addon {
      .header-avatar {
        width: 32px;
        border-radius: 16px;
        height: auto;
      }
    }
  }
  .header-menu {
    display: none;
  }
  ${(props) => props.theme.breakpoints.down('md')} {
    .header-title {
      display: none;
    }
    .header-title__primary {
      font-size: 20px;
    }
    .header-menu {
      display: block;
    }
  }
`;

export interface HeaderProps extends AppBarProps {
  onToggleMenu: () => void;
  brand?: string;
  description?: React.ReactNode;
  addons?: React.ReactNode;
  brandAddon?: React.ReactNode;
  homeUrl?: string;
  logo?: React.ReactNode;
}

/*
  自定义 logo 相关:
  如果为 logo prop 传入一个自定义的 svg, 并且 svg 中的元素通过 id 引用了 defs 中的元素 (比如 linearGradient),
  这种情况下因为 header 和 sidebar 中会各有一个相同的 svg, defs 中元素的 id 会出现冲突,
  当屏幕较窄时, header 会通过设置 display:none 将 svg logo 隐藏,
  这会导致 svg defs 中的元素不能被正常引用 (比如 fill 引用的 color 失效), 这会进一步导致 sidebar 中的 logo 不能正常显示.
  考虑到上述问题, 目前使用 Hidden 组件控制 logo 的显示/隐藏
  参考: https://blog.patw.me/archives/1820/inline-svg-same-id-and-display-none-issue/
*/
export default function Header({
  onToggleMenu,
  brand = undefined,
  description = undefined,
  addons = undefined,
  brandAddon = undefined,
  homeUrl = '/',
  logo = undefined,
  children,
  ...rest
}: HeaderProps) {
  return (
    <StyledAppBar position="sticky" className="header" {...rest}>
      <Toolbar disableGutters={false} className="header-toolbar">
        <Button
          color="inherit"
          aria-label="open drawer"
          className="header-menu"
          aira-label="header menu button"
          onClick={onToggleMenu}>
          <MenuIcon />
        </Button>
        <Link to={homeUrl} className="header-link">
          <Box
            sx={{
              display: {
                xs: 'none',
                md: 'block',
              },
            }}
            className="header-logo">
            {logo || <Logo showText={false} />}
          </Box>
          <div className="header-title">
            <Typography component="h2" noWrap className="header-title__primary">
              {brand}
              {brandAddon}
            </Typography>
            <Typography component="p" noWrap className="header-title__secondary">
              {description}
            </Typography>
          </div>
        </Link>
        <Box
          sx={{
            flexGrow: 1,
          }}
        />
        {!!children && <div className="header-children">{children}</div>}
        <div className="header-addons">{addons}</div>
      </Toolbar>
    </StyledAppBar>
  );
}
