import { HeaderToggleButton } from './Buttons';
import { Transitions } from '@/components/@extended';
import { useLayoutMediaState } from '@/components/Layout/Provider';
import { usePopoverState } from '@/hooks';
import { MoreOutlined } from '@ant-design/icons';
import { AppBar, ClickAwayListener, Paper, Popper, Toolbar } from '@mui/material';
import { useTheme } from '@mui/material/styles';

type IResponsiveSectionProps = React.PropsWithChildren;

function ResponsiveSection(props: IResponsiveSectionProps) {
  const theme = useTheme();
  const { downMd } = useLayoutMediaState();
  const { open, anchorEl, handleToggle, handleClose } = usePopoverState();

  return !downMd ? (
    <>{props.children}</>
  ) : (
    <>
      {/*@ts-ignore*/}
      <HeaderToggleButton
        value="drawer"
        aria-label="open more menu"
        aria-controls={open ? 'menu-list-grow' : undefined}
        aria-haspopup="true"
        onClick={handleToggle}
        selected={open}
      >
        <MoreOutlined />
      </HeaderToggleButton>
      <Popper
        placement="bottom-end"
        open={open}
        anchorEl={anchorEl}
        role={undefined}
        transition
        disablePortal
        style={{ width: '100%' }}
        popperOptions={{
          modifiers: [
            {
              name: 'offset',
              options: {
                offset: [0, 9]
              }
            }
          ]
        }}
      >
        {({ TransitionProps }) => (
          //@ts-ignore
          <Transitions type="fade" in={open} {...TransitionProps}>
            {/*@ts-ignore*/}
            <Paper sx={{ boxShadow: theme.customShadows.z1 }}>
              <ClickAwayListener onClickAway={handleClose}>
                <AppBar color="inherit">
                  <Toolbar>{props.children}</Toolbar>
                </AppBar>
              </ClickAwayListener>
            </Paper>
          </Transitions>
        )}
      </Popper>
    </>
  );
}

export { ResponsiveSection };