import BannerSelect from 'features/theme/BannerSelect';
import TypeSelect from 'features/theme/TypeSelect';
import UserButton from 'features/user/UserButton';
import React, { FC, MouseEventHandler } from 'react';
import styled from 'styled-components';

import { AppBar, AppBarProps, IconButton, Toolbar } from '@material-ui/core';
import MenuIcon from '@material-ui/icons/Menu';

type DrawerWidthProp = {
  drawerWidth: number;
};
type TopBarProps = {
  onClick: MouseEventHandler;
} & DrawerWidthProp;

const FilteredAppBar = ({
  drawerWidth,
  ...props
}: AppBarProps & DrawerWidthProp) => <AppBar {...props} />;

const StyledAppBar = styled(FilteredAppBar)<DrawerWidthProp>`
  ${({ theme }) => theme.breakpoints.up('sm')} {
    width: calc(100% - ${({ drawerWidth }) => drawerWidth}px);
    margin-left: ${({ drawerWidth }) => drawerWidth}px;
  }
  overflow-y: hidden;
`;
const MenuButton = styled(IconButton)`
  margin-right: ${({ theme }) => theme.spacing(2)}px;
  ${({ theme }) => theme.breakpoints.up('sm')} {
    display: none;
  }
`;

const BarContent = styled.section`
  flex-grow: 1;
`;
const TopBar: FC<TopBarProps> = ({ onClick, drawerWidth, children }) => (
  <StyledAppBar position="fixed" drawerWidth={drawerWidth}>
    <Toolbar>
      <MenuButton
        color="inherit"
        aria-label="open drawer"
        edge="start"
        onClick={onClick}
      >
        <MenuIcon />
      </MenuButton>
      <BarContent>{children}</BarContent>
      <TypeSelect />
      <BannerSelect />
      <UserButton />
    </Toolbar>
  </StyledAppBar>
);

export default TopBar;