// eslint-disable-next-line filenames/match-regex
import { styled } from '@mui/material/styles';
import { ReactNode } from 'react';
import { EditProps, Edit as RaEdit } from 'react-admin';

const StyledEdit = styled(RaEdit, { slot: 'root' })(({ theme }) => ({
  '&>.MuiToolbar-root:first-of-type': {
    backgroundColor: theme.palette.background.default
  },
  '& .RaEdit-card': {
    [theme.breakpoints.down('sm')]: {
      marginBottom: theme.spacing(6)
    }
  },
  '& .RaEdi-card, & > div > div > form': {
    backgroundColor: theme.palette.background.default
  },

  '& .RaToolbar-mobileToolbar': {
    paddingLeft: `${theme.spacing(2.5)} !important`,
    paddingRight: `${theme.spacing(2.5)} !important`,
    paddingTop: '0 !important'
  },
  '& .RaEdit-main': {
    marginTop: 0
  },
  '& .RaEdit-main>.MuiPaper-root:first-of-type': {
    backgroundColor: theme.palette.background.default
  },
  // This line of code took me 4 hours to write 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.
  '& .RaEdit-main:has(.LongFormView)>.MuiPaper-root:first-of-type': {
    overflow: 'visible'
  },
  '& .RaEdit-main:has(.tabbed-form) .MuiTableContainer-root': {
    width: 'inherit'
  }
}));
function Edit(props: EditProps & { children: ReactNode }): JSX.Element {
  return <StyledEdit {...props} />;
}

export { Edit };
export type { EditProps };