import { Theme, Toolbar, ToolbarProps, styled, useMediaQuery } from '@mui/material';
import PropTypes from 'prop-types';

function TopToolbar(props: ToolbarProps) {
  const isXSmall = useMediaQuery<Theme>((theme) => theme.breakpoints.down('sm'));
  return <StyledToolbar disableGutters variant={isXSmall ? 'regular' : 'dense'} {...sanitizeToolbarRestProps(props)} />;
}

TopToolbar.propTypes = {
  children: PropTypes.node,
  className: PropTypes.string
};

const PREFIX = 'RaTopToolbar';

const StyledToolbar = styled(Toolbar, {
  name: PREFIX,
  overridesResolver: (styles) => styles.root
})(({ theme }) => ({
  display: 'flex',
  justifyContent: 'flex-end',
  alignItems: 'center',
  gap: theme.spacing(1),
  whiteSpace: 'nowrap',
  flex: '0 0 auto',
  paddingTop: theme.spacing(0.5),
  paddingBottom: theme.spacing(0.5),
  paddingInline: theme.spacing(2),
  [theme.breakpoints.down('md')]: {
    flex: '0 1 100%'
  },
  [theme.breakpoints.down('sm')]: {
    backgroundColor: theme.palette.background.paper,
    justifyContent: 'space-between',
    alignItems: 'center'
  }
}));

function sanitizeToolbarRestProps({ hasCreate, ...props }: any): any {
  return props;
}

export { TopToolbar };