import { useThemeConfig } from '@/components/Layout/ThemeProvider';
import { AppBar } from '@mui/material';
import { styled } from '@mui/material/styles';

const AppBarStyled = styled(AppBar, { shouldForwardProp: (prop) => prop !== 'open' })(
  ({ theme, open }: { theme: any; open: boolean }) => {
    const { drawerWidth } = useThemeConfig();
    return {
      zIndex: theme.zIndex.drawer + 1,
      transition: theme.transitions.create(['width', 'margin'], {
        easing: theme.transitions.easing.sharp,
        duration: theme.transitions.duration.leavingScreen
      }),
      ...(!open && {
        width: `calc(100% - ${theme.spacing(7.5)})`
      }),
      ...(open && {
        marginLeft: drawerWidth,
        width: `calc(100% - ${drawerWidth}px)`,
        transition: theme.transitions.create(['width', 'margin'], {
          easing: theme.transitions.easing.sharp,
          duration: theme.transitions.duration.enteringScreen
        })
      })
    };
  }
);

export { AppBarStyled };