/* eslint-disable filenames/match-regex */
import { styled } from '@mui/material/styles';
import { Show as RaShow, ShowProps } from 'react-admin';

const StyledShow = styled(RaShow, { slot: 'root' })(({ theme }) => ({
  '&>.MuiToolbar-root:first-of-type': {
    backgroundColor: theme.palette.background.default
  },
  '& .RaShow-card, & > div > div > form': {
    backgroundColor: theme.palette.background.default
  },
  '& .RaShow-main>.MuiPaper-root:first-of-type': {
    // It took me 4 hours to write this line of code and solve a problem with react-sticky-box and Long Forms.
    // The overflow is 'hidden' by default, we need it to be visible to allow react-sticky-box to work and manage visibility with anchors
    // of all the elements inside the page.
    overflow: 'visible'
  }
}));

function Show(props: ShowProps): JSX.Element {
  // @ts-ignore
  return <StyledShow {...props} />;
}
export { Show };
export type { ShowProps };